Vue Cli 3：创建项目

 

一 简介

 

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，有几个独立的部分。

 

1 CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。（vue create、vue serve等）

 

2 CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。

 

3 CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。

（例如，手动创建项目时，Vue Cli 3会添加@vue/cli-plugin-babel、@vue/cli-plugin-eslint、@vue/cli-plugin-unit-jest等插件）

 

二 安装

 

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。

 

1 如果已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，需要先卸载。

 

npm uninstall -g vue-cli# OR
yarn global remove vue-cli

 

2 安装新的包

 

npm install -g @vue/cli
# OR
yarn global add @vue/cli

 

3 检查版本

 

vue --version
# OR
vue -V

 

三 创建项目

 

1 项目名称

 

vue create vue-demo

 

2 选择预设的配置

 

最后两个是系统预设的配置，前面的都是用户保存的预设的配置。

 

 

3 选择项目需要的配置

 

↑↓移动光标，空格切换选中状态，回车确认结果

 

 

4 选择Vue Router模式

 

Vue Router默认hash模式，也可以使用history模式。

使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

 

 

5 选择CSS预处理器

 

 

6 配置代码检测、格式化

 

　使用ESLint进行代码检测，使用Prettier插件进行代码格式化。

 

 

7 代码检测的时机

 

保存时检测。

 

 

8 单元测试方案

 

Jest是由Facebook推出的JavaScript测试框架。

 

 

9 配置保存位置

 

保存到单独的文件里。

 

 

10 将本次设置保存为预设，以便复用

 

 

11 预设的名称

 

 

12 创建项目

 

所有选项完成后，Vue Cli 3才会开始创建目录，安装npm包等。