18 搭建Vue-Cli脚手架

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。下面介绍 vue-cli 的整个搭建过程。

注意：以下内容是基于Vue-cli4.0以上版本的。

18.1.安装npm

NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

实际上，npm就是前端的Maven。

从node官网下载并安装node，安装步骤很简单，只要一路next就可以了。安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。

C:\Users\Administrator>node -v
v12.18.0

我们所需要的npm也已经安装好了，输入如下命令，显示出npm的版本信息。

C:\Users\Administrator>npm -v
6.14.4

到这里node的环境已经安装完了,npm包管理工具也有了，但是由于npm的有些资源被墙，为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。

18.2.安装cnpm

点击进入淘宝的cnpm网站,里面有详细的配置方法。或者直接在命令行输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后等待，安装完成。输入cnpm -v，可以查看当前cnpm版本，这个和npm的版本还是不一样的。

C:\Users\Administrator>cnpm -v
cnpm@6.1.1

使用cnpm的方法就是，需要用到npm的地方直接使用cnpm替换就可以了。

18.3.全局安装 vue-cli

全局安装vuecli（就相当与在本机的npm仓库中有了vuecli）：

//安装最新@vue/cli版本
npm install -g @vue/cli
//安装指定的@vue/cli版本    
npm install -g @vue/cli@4.1.1

安装完成后，使用 vue -V 显示版本号来测试vue是否安装成功。

C:\Users\Administrator>vue -V
@vue/cli 4.1.1

18.4.创建vue-cli工程

在命令行下进入到工作空间文件夹中，输入如下命令：
vue create hello hello是工程名（注意：工程名必须全部小写）
选择预设模板。这里选择“Manually select features”（手动选择特征）
通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。
1. Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。
2. TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行。
3. Progressive Web App (PWA) Support：渐进式Web应用程序
4. Router ：vue-router（vue路由）
5. Vuex ：vuex（vue的状态管理模式）
6. CSS Pre-processors ：CSS 预处理器（如：less、sass）
7. Linter / Formatter：代码风格检查和格式化（如：ESlint）
8. Unit Testing ：单元测试（unit tests）
9. E2E Testing ：e2e（end to end）测试
  第一次创建工程时，可以只选择Babel和Router即可。
选择是否使用history 形式的路由，也就是询问路径是否带 # 号，这里选择 n。
询问将依赖文件放在独立文件中，还是package.json中：为了保持工程配置文件的整洁性，这里选择“In package.json”。
询问是否将当前选择保存以备下次使用。这里选择“n”。
接下来耐心等待安装：最后出现：
按照提示，进入工程根目录。
输入：npm run serve 启动工程。
启动成功。
在浏览器中测试：http://localhost:8080