一、Vue-cli 3.x 安装

Node 版本要求：Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

npm install -g @vue/cli

查版本是否正确 (3.x)：

vue --version

官方安装文档：https://cli.vuejs.org/zh/guide/installation.html

二、创建一个项目

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

1. 在 cmd 下运行以下命令创建项目

vue create vue-test

下面将根据提示进行相应的配置。

2. 选择配置方式

说明：

• default (babel, eslint) ：默认配置
• Manually select features： 手动选择配置

这里选择 Manually select features

3. 手动选择项目需要的特性

说明：

• Babel： Babel 编译
• TypeScript：TypeScript 支持
• Progressive Web App (PWA) Support： PWA 支持
• Router： Vue 路由
• Vuex： Vue 状态管理
• CSS Pre-processors： CSS 预编译器（包括：SCSS/Sass、Less、Stylus）
• Linter / Formatter： 代码检测和格式化
• Unit Testing： 单元测试
• E2E Testing： 端到端测试

这里选择上图勾选的项。

4. 路由是否采用 history 模式，这里选择 y

5. 选择 CSS 预编译器，这里选择 Less

6. 选择 ESLint 的代码规范，这里选择 ESLint + Standard config

7. 选择何时进行代码检测，这里选择 Lint on save

说明：

• Lint on save： 在保存时进行检测
• Lint and fix on commit： 在 fix 和 commit 是进行检查

8. 选择单元测试解决方案，这里选择 Jest

9. 选择 Babel、PostCSS、ESLint 等配置文件存放位置，这里选择 In dedicated config files

说明：

• In dedicated config files： 单独保存在各自的配置文件中
• In package.json： 保存在 package.json 文件中

10. 是否记录一下以便下次使用这套配置，这里选择 N 不记录，如果键入 Y 需要输入保存名字

11. 确定后，等待 Vue-cli 完成初始化

12.vue-cli 初始化完成后，根据提示，进入 vue-test 项目中，并启动项目

 （1）进入 vue-test 项目

cd vue-test

（2）启动服务

yarn serve

（3）打包编译

yarn build

（4）执行 lint

yarn lint

（5）执行单元测试

yarn test:unit

效果预览：

更多请查看：https://cli.vuejs.org/zh/guide/