v-cli3.0 搭建vue项目步骤详解（一）

1.Vue CLI介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

1. 通过 @vue/cli 搭建交互式的项目脚手架。
2. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
3. 一个运行时依赖 (@vue/cli-service)，该依赖：
   a）可升级；
   b）基于 webpack 构建，并带有合理的默认配置；
   c）可以通过项目内的配置文件进行配置；
   d）可以通过插件进行扩展；
   e）一个丰富的官方插件集合，集成了前端生态中最好的工具。

2.环境准备

2.1. 安装Node.js

Node 版本要求：Vue CLI3.0 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

2.2 安装v-cli3.0

关于旧版本：Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
安装新的包指令如下：

npm install -g @vue/cli

3.vue-cli搭建脚本文件

以搭建一个项目名称为hik-trial 的Vue前端项目为例

3.1vue-cli搭建脚本文件

在终端输入以下命令：

vue create hik-trial

根据提示进行相应的配置（以手动配置为例）：

3.1.1选择Manually select features(手动配置)

3.1.2. 选择项目需要的一些特性

选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)

3.1.3. 是否选择history路由

此处选择否（根据项需要选择）

3.1.4. 选择CSS预处理器语言，此处选择SCSS

3.1.5. 选择ESLint的代码规范，此处使用 Standard代码规范

3.1.6. 选择何时进行代码检测，此处选择在保存时进行检测

3.1.7. 选择单元测试解决方案，此处选择 Jest

3.1.8. 选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中

3.1.9. 选择是否存储当下配置模式（否）

3.1.10. 配置完成后等待Vue-cli完成初始化

3.2启动项目

3.2.1. 执行:npm run serve

3.2.2．浏览器打开http://localhost:8080