vue cli 4 +创建项目步骤

一、安装脚手架

安装命令如下

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

检测版本

vue --version

二、创建项目

1.创建项目开始，定义名称

vue create [appName]

例如创建一个名称为 testapp 的项目命令为

vue create testapp

2 选择配置类型

按方向键选择，按enter确认
第一个为默认配置，包含eslint 和 babel
第二个为自定义配置

3 各项配置设置

操作方式

按方向键进行上下选择
按空格 选中
按A键全选
按I键全选
按enter 确认所有配置进入下一步

（1）babel

是否引入转码功能，该项功能可将es6转码成es5

（2） TypeScript

是否引入ts，引入后可使用ts进行编程

（3）Progressive Web App (PWA) Support

是否引入渐进式Web应用程序（PWA）支持 （pwa为应用多项技术的web app。核心技术包括 App Mainfest、Service Worker、Web Push,等等）

（4）Router

是否引入vue-router

（5）vuex

是否引入状态管理

（6）css-processors

是否引入css预处理

(7) linter / formatter

是否引入格式验证

(8) Unit Testing

是否引入单元测试

（9）e2e Testing

是否引入 end to end 测试

上述选完后点击enter 可看到所有选中的设置项

4 针对上述选中项进行单独配置

(1) 开启vue router

选择路由模式 是否启用history模式（默认是hash模式）

（2）开启 css pre-process

选择css 预处理方式 箭头选择 enter确认
依次为 dart-sass dart编写的sass
node-sass node编写的sass
less
stylus

(3) 开启linter/formatter

ESLint with error prevention only 只有报错功能
ESLint + Airbnb config 简化模式
ESLint + Standard config 标准模式
ESLint + Prettier 严格模式

（4）选择校验时机

lint on save 保存即检验
lint and fix on commit 提交时进行检验及修改

(5)选择单元测试方案

Mocha + Chai
Jest

（6）选择e2e测试方案

Cypress (Chrome only) 只能在chorme中使用
Nightwatch (WebDriver-based)

5 保存配置位置

In dedicated config files 额外文件中
package.json package.json中

6 是否将当前配置保存为一个默认配置