一、安装vue
1、安装node.js,安装完node.js之后,npm也会自动安装
查询是否安装成功的命令:
node -v
npm -v
![](https://i-blog.csdnimg.cn/blog_migrate/f379cde21ed4e17e696e2c1afade4012.jpeg)
2、全局安装脚手架工具vue-cli,命令如下:
npm install --global vue-cli
![](https://i-blog.csdnimg.cn/blog_migrate/1b4b683273d3a59dc8d19e33ecaa8744.jpeg)
3、vue项目初始化命令如下,若没有安装webpack,则先安装webpack
npm install -g webpack
vue init webpack myVue
注:安装过程 中有个选项(Use ESLint to line your code ?选择 No )
![](https://i-blog.csdnimg.cn/blog_migrate/066a0515e6fdb202dace99451873018d.jpeg)
初始化完成后的vue项目目录如下:
![](https://i-blog.csdnimg.cn/blog_migrate/800b4fb6def55d7b15350089b1ec4e44.jpeg)
4、进入到myVue目录下,使用npm install 安装package.json包中的依赖
命令如下:
cd myVue
npm install
![](https://i-blog.csdnimg.cn/blog_migrate/b58ba7b83880dea7d29ae84435eda419.jpeg)
5、运行项目:
npm run dev
![](https://i-blog.csdnimg.cn/blog_migrate/603c6be3cb8cca2d71c09a1914fae47b.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/aaac173a139ec817fa3c4721e0faee40.jpeg)
在浏览器上输入:localhost:8080,将会出现下面的vue初始页面:
![](https://i-blog.csdnimg.cn/blog_migrate/44dbdbc01639a194dd11bf21f8ff7519.jpeg)
6、结束项目运行:
ctrl+v,选择Y即可停止项目的运行
![](https://i-blog.csdnimg.cn/blog_migrate/f7cc7056d9196d3b57d95bd8e2aedb67.jpeg)
二、vue项目目录说明
![](https://i-blog.csdnimg.cn/blog_migrate/7d767a1960e5105034cd53ab68f3f771.jpeg)
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;
![](https://i-blog.csdnimg.cn/blog_migrate/3691acde3afffcf1475b11e634bcf54e.jpeg)
2、找到src的main.js文件,在该文件中new Vue的实例,要加载的模板内容App;
![](https://i-blog.csdnimg.cn/blog_migrate/69d3ef113d3a647d31ffd6d5b89a8a7c.jpeg)
3、App是src目录下的App.vue结尾的文件;
![](https://i-blog.csdnimg.cn/blog_migrate/c208d0832e3baec02ced0580474325b4.jpeg)
4、在App.vue所对应的模板当中,有一个router-view在src目录下有一个router文件夹,该文件夹有个index.js文件,该文件是配置路由词典,指定了路由地址是空,加载HelloWorld组件
![](https://i-blog.csdnimg.cn/blog_migrate/15bdc23d2f3d9b7949d9dd4ef75c65a3.jpeg)
注:vue运行是基于node环境的,构建vue框架之前,需要确保node环境安装成功
四、Vue的组件的使用
1、在components文件夹下创建.vue结尾的文件
例如在:src/components/public/目录下新建header.vue文件
![](https://i-blog.csdnimg.cn/blog_migrate/5d3a7ea4adcd84f15a18de71781dae52.jpeg)
header.vue文件内容如下:
![](https://i-blog.csdnimg.cn/blog_migrate/473c82d84388c5fdf499fc41d69e9ed7.jpeg)
2、在路由配置文件src/router/index.js中引入组件并配置组件路由
2.1、引入组件
import Header from '@/components/public/header'
2.2、配置组件路由
{
path: '/header',
name: 'header',
component: Header
}
![](https://i-blog.csdnimg.cn/blog_migrate/f7f2f5ddd87d8ebae033eb90355596f9.jpeg)
3、运行项目:npm run dev
4、在浏览器中输入:localhost:8080/header ,显示如下页面:
![](https://i-blog.csdnimg.cn/blog_migrate/da65f668843bab5ce3e73ecd6e08d5b4.jpeg)
附:vue生命周期示意图
![](https://i-blog.csdnimg.cn/blog_migrate/a91ac322d6aaec91493ad6822978749f.jpeg)