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

安装

• vue2 :npm install -g vue-cli
• vue3 :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