三、Vue进阶
3.1 Vue-cli
3.1.1 Vue-cli概述
cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。
3.1.2 Vue-cli安装
node.js提供了前端程序的运行环境，可以把node.js理解成是运行前端程序的服务器。
从官网下载安装即可：
http://nodejs.cn/download/
安装就是一路下一步，node安装成功会有npm,我们主要使用npm进行项目的操作
使用npm安装vue-cli
使用如下命令安装vue-cli
npm install -g @vue/cli
升级vue-cli
npm update -g @vue/cli
- npm： 使用node.js的命令，类似Java中Maven用于下载js库和管理Vue项目
- install： 安装
- vue-cli： 要安装的vue-cli
- -g： 全局安装
如果使用npm官方镜像速度比较慢，可以使用淘宝镜像来安装：
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后使用npm命令时就可以替换成cnpm
cnpm install vue-cli -g
cnpm install
cnpm run dev
3.1.3 vue-cli下载项目骨架搭建项目
就像maven一样，vue为我们提供了一些官方项目骨架。使用vue list命令可以列出当前官方提供的骨架，可以使用这些骨架来快速搭建出项目。
vue list
a.创建项目目录并打开
mkdir e:/my-vue-project
cd e:/my-vue-project
b.使用Webpack骨架快速创建项目
在my-vue-project目录中使用以下命令下载项目骨架
vue init webpack my-project1
- webpack: 骨架名称
- my-project1: 项目名称
c.进入到my-project1文件夹内后，使用以下命令来运行项目
npm run dev
d.访问测试
e.项目结构
3.1.4 webpack项目常用命令
- npm install
在运行和调试项目前，一般都需要先执行该命令，目的是安装项目运行所需要的环境。
- npm run dev
以调试的方式运行项目
- npm run build
生成用于项目部署所需的最小资源，生成的内容存放在build文件夹内。
