VUE的安装及使用快速入门

朱雀 2022-01-28 16:13 315阅读 0赞

## VUE的安装及使用快速入门 ##

vue是一个JavaMVVM库，是一套用于构建用户界面的渐进式框架，是初创项目的首选前端框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。它是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。它提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

一、安装vue

1、安装node.js，安装完node.js之后，npm也会自动安装

查询是否安装成功的命令：

node -v

npm -v

![u_817140848_2332321320_fm_173_app_49_f_JPEG_w_364_h_87_s_7A25A144E3F8A06808CB55860200A089][]

2、全局安装脚手架工具vue-cli，命令如下：

npm install --global vue-cli

![u_257879488_2103907607_fm_173_app_49_f_JPEG_w_640_h_91][]

3、vue项目初始化命令如下，若没有安装webpack，则先安装webpack

npm install -g webpack

vue init webpack myVue

注：安装过程 中有个选项（Use ESLint to line your code ?选择 No ）

![u_206217202_4094068924_fm_173_app_49_f_JPEG_w_640_h_248_s_F2A5F148BBE09F701273CC850200F08B][]

初始化完成后的vue项目目录如下：

![u_4214703202_620057814_fm_173_app_49_f_JPEG_w_368_h_434_s_E1F2036752B4B66C0CD1D40F0000E0C3][]

4、进入到myVue目录下，使用npm install 安装package.json包中的依赖

命令如下：

cd myVue

npm install

![u_1287911943_2770218222_fm_173_app_49_f_JPEG_w_640_h_96][]

5、运行项目：

npm run dev

![u_1556517163_2275415285_fm_173_app_49_f_JPEG_w_433_h_28][]

![u_3584563017_4278090784_fm_173_app_49_f_JPEG_w_627_h_115_s_BA07F14CCFA4BF700CF6C59B0200F08B][]

在浏览器上输入：localhost:8080，将会出现下面的vue初始页面：

![u_921530914_603745497_fm_173_app_49_f_JPEG_w_640_h_586_s_49803C726B5A66CC587DC15D020050E2][]

6、结束项目运行：

ctrl+v，选择Y即可停止项目的运行

![u_2877516279_1431259010_fm_173_app_49_f_JPEG_w_640_h_69][]

二、vue项目目录说明

![u_3218365640_2384742699_fm_173_app_49_f_JPEG_w_369_h_643_s_E8F2A3435AE4B76C567454050000F0C3][]

build：项目构建(webpack)相关代码

config：配置目录，包括端口号等

node\_modules：npm加载的项目依赖块

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

assets: 放置一些图片，如logo等

components：该目录里存放的我们的开发文件组件，主要的开发文件都存放在这里了

App.vue：项目入口文件

main.js：项目的核心文件

router：路由配置目录

static：放置一些静态资源文件

test：初始测试目录，可删除

.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

index.html：首页入口文件

package.json：项目配置文件

README.md：项目的说明文档，markdown 格式

三、vue项目启动流程

1、在执行npm run dev的时候，会去在当前文件夹下的项目中找package.json文件,启动开发服务器，默认端口是8080；

![u_1993508972_4047401773_fm_173_app_49_f_JPEG_w_640_h_253_s_20C09142DBE0B1705655DC0D0000F0C1][]

2、找到src的main.js文件，在该文件中new Vue的实例，要加载的模板内容App；

![u_3013279965_1633850418_fm_173_app_49_f_JPEG_w_452_h_322_s_6041B34053F4B66B1CCD4C010000E0C0][]

3、App是src目录下的App.vue结尾的文件；

![u_927348574_2202134744_fm_173_app_49_f_JPEG_w_640_h_553_s_21C0B1409AA6B76C4E41540E0000E0C0][]

4、在App.vue所对应的模板当中，有一个router-view在src目录下有一个router文件夹，该文件夹有个index.js文件，该文件是配置路由词典，指定了路由地址是空，加载HelloWorld组件

![u_911083013_1434273632_fm_173_app_49_f_JPEG_w_509_h_379_s_6061B34253E4B36C5C5D040F0000E0C0][]

注：vue运行是基于node环境的,构建vue框架之前,需要确保node环境安装成功

四、Vue的组件的使用

1、在components文件夹下创建.vue结尾的文件

例如在：src/components/public/目录下新建header.vue文件

![u_3514243451_3794796354_fm_173_app_49_f_JPEG_w_363_h_143_s_FAE281441BE1BF6410E7DD0B0200A0CB][]

header.vue文件内容如下：

![u_961392477_1719901887_fm_173_app_49_f_JPEG_w_640_h_291_s_29C0B34E1BE093640EDDF5060000E0C0][]

2、在路由配置文件src/router/index.js中引入组件并配置组件路由

2.1、引入组件

import Header from '@/components/public/header'

2.2、配置组件路由

path: '/header',

name: 'header',

component: Header

![u_4099868317_2212358334_fm_173_app_49_f_JPEG_w_536_h_537_s_E060B34253B6B26F56ED9C0F000070C0][]

3、运行项目：npm run dev

4、在浏览器中输入：localhost:8080/header ,显示如下页面：

![u_2013344042_2621465106_fm_173_app_49_f_JPEG_w_465_h_299_s_49803C7279E077053777475D0200C0E2][]

附：vue生命周期示意图

![u_3865911803_2670798241_fm_173_app_49_f_JPEG_w_640_h_1621_s_5DA03C729FEA44015CC4D04E020060F3][]

## 作者最新文章 ##

*  ### [liunx磁盘存储相关命令-df命令的使用][liunx_-df] ###
 *  ### [linux文件权限设置命令-chgrp命令的使用][linux_-chgrp] ###
 *  ### [linux文件权限设置命令-chmod命令的使用][linux_-chmod] ###

[u_817140848_2332321320_fm_173_app_49_f_JPEG_w_364_h_87_s_7A25A144E3F8A06808CB55860200A089]: /images/20220128/59f8a255095d4802ae4ac1e47e099a88.png
[u_257879488_2103907607_fm_173_app_49_f_JPEG_w_640_h_91]: /images/20220128/8434e34cace04d2ea5195b49c32dee95.png
[u_206217202_4094068924_fm_173_app_49_f_JPEG_w_640_h_248_s_F2A5F148BBE09F701273CC850200F08B]: /images/20220128/335b6f38e39e49eebf973e5e413cbadd.png
[u_4214703202_620057814_fm_173_app_49_f_JPEG_w_368_h_434_s_E1F2036752B4B66C0CD1D40F0000E0C3]: /images/20220128/fff1316482304358a5a1cea5d31d48e1.png
[u_1287911943_2770218222_fm_173_app_49_f_JPEG_w_640_h_96]: /images/20220128/d5fa84f1149b4e0ab0fd586773cd5f27.png
[u_1556517163_2275415285_fm_173_app_49_f_JPEG_w_433_h_28]: /images/20220128/0d80d6a47e3246bd91d9776b5442651b.png
[u_3584563017_4278090784_fm_173_app_49_f_JPEG_w_627_h_115_s_BA07F14CCFA4BF700CF6C59B0200F08B]: /images/20220128/9014cadb121140999347a258fc2ca2ee.png
[u_921530914_603745497_fm_173_app_49_f_JPEG_w_640_h_586_s_49803C726B5A66CC587DC15D020050E2]: /images/20220128/377410684ced4d42a7a45a48204c8284.png
[u_2877516279_1431259010_fm_173_app_49_f_JPEG_w_640_h_69]: /images/20220128/88b10eaeb4384228a2ea3f1ca93b6505.png
[u_3218365640_2384742699_fm_173_app_49_f_JPEG_w_369_h_643_s_E8F2A3435AE4B76C567454050000F0C3]: /images/20220128/043f1109ece54e2eaf75ffb305b41e8e.png
[u_1993508972_4047401773_fm_173_app_49_f_JPEG_w_640_h_253_s_20C09142DBE0B1705655DC0D0000F0C1]: /images/20220128/04915eaa5fb24dc6984466cd9cf3521a.png
[u_3013279965_1633850418_fm_173_app_49_f_JPEG_w_452_h_322_s_6041B34053F4B66B1CCD4C010000E0C0]: /images/20220128/d04d08b5d19447c49fa87708d89bb58a.png
[u_927348574_2202134744_fm_173_app_49_f_JPEG_w_640_h_553_s_21C0B1409AA6B76C4E41540E0000E0C0]: /images/20220128/4c440415110144d1b44bd1a13cc220c4.png
[u_911083013_1434273632_fm_173_app_49_f_JPEG_w_509_h_379_s_6061B34253E4B36C5C5D040F0000E0C0]: /images/20220128/0ea804dccebc437cbb2f2f2aebd0b121.png
[u_3514243451_3794796354_fm_173_app_49_f_JPEG_w_363_h_143_s_FAE281441BE1BF6410E7DD0B0200A0CB]: /images/20220128/08ec6d1f9f914c07958e5e78dba48a4d.png
[u_961392477_1719901887_fm_173_app_49_f_JPEG_w_640_h_291_s_29C0B34E1BE093640EDDF5060000E0C0]: /images/20220128/48e90029b878472bb7102d9a13f80b0c.png
[u_4099868317_2212358334_fm_173_app_49_f_JPEG_w_536_h_537_s_E060B34253B6B26F56ED9C0F000070C0]: /images/20220128/534e140af5f448d185bc60d889b6764a.png
[u_2013344042_2621465106_fm_173_app_49_f_JPEG_w_465_h_299_s_49803C7279E077053777475D0200C0E2]: /images/20220128/5c7dfce25db24fde8ee24ff91183c7eb.png
[u_3865911803_2670798241_fm_173_app_49_f_JPEG_w_640_h_1621_s_5DA03C729FEA44015CC4D04E020060F3]: /images/20220128/e66c11ff28c74a3887bf49036332aeca.png
[liunx_-df]: https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9473093096142525880%22%7D&n_type=1&p_from=3
[linux_-chgrp]: https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_8850269176743109442%22%7D&n_type=1&p_from=3
[linux_-chmod]: https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_8570949959997045038%22%7D&n_type=1&p_from=3