使用vue-cli3初始化一个项目

安装

vue2 :npm install -g vue-clivue3 :npm install -g @vue/cli

若是安装报如下错误:

npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead npm ERR! code Z_BUF_ERROR npm ERR! errno -5

运行 :npm install -g @vue/cli --registry=https://registry.npm.taobao.org

创建

vue3 vue create vue-learn 回车之后会出现以下画面 Vue CLI v3.9.3 ┌────────────────────────────┐ │ Update available: 3.10.0 │ └────────────────────────────┘ ? Please pick a preset: (Use arrow keys) ❯ test (vue-router, vuex, stylus, babel, eslint, unit-mocha) default (babel, eslint) Manually select features

第一个test是我第一次创建的记录,方便第二次默认创建

default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。

Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

使用上下方向键来选择需要的选项

使用manually来创建项目,选中之后会出现以下画面

Vue CLI v3.9.3 ┌────────────────────────────┐ │ Update available: 3.10.0 │ └────────────────────────────┘ ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to t oggle all, <i> to invert selection) ❯◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing

依然是上下键选择,空格键选中

对于每一项的功能，此处做个简单描述：

TypeScript 支持使用 TypeScript 书写源码。Progressive Web App (PWA) Support PWA 支持。Router 支持 vue-router 。Vuex 支持 vuex 。CSS Pre-processors 支持 CSS 预处理器。Linter / Formatter 支持代码风格检查和格式化。Unit Testing 支持单元测试。E2E Testing 支持 E2E 测试。

第一个typescript暂时还不会,先不选,这次选择常用的

◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ❯◉ Unit Testing ◯ E2E Testing

回车之后让选择css处理器,这里选择less

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus

接下来选择eslink,我选择了eslink+prettier

? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ❯ ESLint + Prettier

选择代码检查方式,第一个是保存的时候就检查,第二个是提交上传代码的时候才检查

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i > to invert selection) ❯◉ Lint on save ◯ Lint and fix on commit

选择单元测试,这个我不懂,随便先选个jest

? Pick a unit testing solution: Mocha + Chai ❯ Jest

配置文件存放的地方,选择package.json

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files ❯ In package.json

是否保存这次配置,方便下次直接使用,一般都是选择Y

? Save this as a preset for future projects? (y/N)

配置完成之后就开始创建一个初始项目了

启动

cd vue-learn npm run serve