vue-cli 3.0安装和使用

零. 前言

公司最近开发项目使用的是vue-cli 3.0版本开发，但是对于vue-cli 3.0版本一直没有研究过如何使用，公司使用配置：pug + ts + stylus + eslint；编辑器使用：vscode，使用起来简直不要太爽。

默认你已经安装了nodejs

一.安装vue-cli 3.0

1.安装：

npm install -g @vue/cli

• 1

• -g： 全局安装 vue-cli

二.创建项目

1.创建vue-app项目：

vue create vue-app

• 1

2.项目配置：

• 默认配置
• 手动配置：babel ts 预编译 等等… 【选择这个】

以下是我选择的配置（可以直接按数字键1,2,3,4进行选择）

• Babel：将ES6编译成ES5
• TypeScript：JS超集，主要是类型检查
• Router和Vuex，路由和状态管理
• Linter/ Formatter：代码检查工具
• CSS Pre-processors：css预编译 (稍后会对这里进行配置)
• Unit Testing：单元测试，开发过程中前端对代码进行自运行测试

Use class-style component syntax? (Y/n) y

• 1

是否使用Class风格装饰器？
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y

• 1

使用Babel与TypeScript一起用于自动检测的填充? yes

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

• 1

路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

使用什么css预编译器？ 我选择的 stylus

• tslint: typescript格式验证工具
• eslint w...: 只进行报错提醒； 【选这个】
• eslint + A...: 不严谨模式；
• eslint + S...: 正常模式；
• eslint + P...: 严格模式；

代码检查方式：我选择保存时检查


单元测试工具，这里附上vue单元测试的链接，想了解的小伙伴戳这里 https://vue-test-utils.vuejs.org/zh/

vue-cli 一般来讲是将所有的依赖目录放在package.json文件里

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

• 1

是否在以后的项目中使用以上配置？不

下载依赖的工具：使用 yarn，速度快。

到此为止，安装就完成了，可以等待安装成功。

三.使用

1.vscode的eslint配置，使代码能够在ctrl+s的时候自动格式化：
在vue-app目录县新建文件夹.vscode文件，再在.vscode目录下新建settings.json，文件内容如下：

tips：此配置包含了.vue文件.styl文件typescript的代码缩进

{
  "editor.tabSize": 2,

  "prettier.printWidth": 160,
  "prettier.tabWidth": 2,
  "prettier.semi": false,
  "prettier.singleQuote": true,

  "[vue]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[stylus]": {
    "editor.formatOnSave": true
  },

  "stylusSupremacy.insertBraces": false,
  "stylusSupremacy.insertColons": false,
  "stylusSupremacy.insertSemicolons": false,

  "languageStylus.useSeparator": false,

  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 160,
      "tabWidth": 2,
      "semi": false,
      "singleQuote": true,
    }
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

• 这样做：
  表示vscode在读取到vue-app项目是，回去查找.vscode下的settings.json配置并应用。必须禁用插件：eslint

2.使用pug

yarn add pug pug-plain-loader --dev

• 1

• 使用yarn安装 pug 和 pug-plain-loader；（没有yarn的自行百度安装
• --dev：安装到开发环境
• 使用：打开App.vue文件，将文件修改为下面这样既可。

<template lang="pug">
  #app
    #nav
      router-link(to="/") Home
      router-link(to="/about") About
    router-view
  </div>
</template>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

四、常见的一些问题

0.其他一些eslint配置都可以在packge.json文件中的eslintConfig下的rules下配置

1.console.log(1)报错：
找到packge.json文件中的eslintConfig下的rules：

  "no-console": "off"

• 1

参考文献：

安装
eslint配置