零. 前言
公司最近开发项目使用的是vue-cli 3.0版本开发，但是对于vue-cli 3.0版本一直没有研究过如何使用，公司使用配置：pug + ts + stylus + eslint；编辑器使用：vscode，使用起来简直不要太爽。
默认你已经安装了nodejs
一.安装vue-cli 3.0
1.安装：
npm install -g @vue/cli
-g： 全局安装vue-cli
二.创建项目
1.创建vue-app项目：
vue create vue-app
2.项目配置：
- 默认配置
- 手动配置：babel ts 预编译 等等… 【选择这个】
以下是我选择的配置（可以直接按数字键1,2,3,4进行选择）
Babel：将ES6编译成ES5TypeScript：JS超集，主要是类型检查Router和Vuex，路由和状态管理Linter/Formatter：代码检查工具CSS Pre-processors：css预编译 (稍后会对这里进行配置)Unit Testing：单元测试，开发过程中前端对代码进行自运行测试
Use class-style component syntax? (Y/n) y
是否使用Class风格装饰器？
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}
Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y
使用Babel与TypeScript一起用于自动检测的填充? yes
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
路由使用历史模式? 这种模式充分利用 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
是否在以后的项目中使用以上配置？不
下载依赖的工具：使用 yarn，速度快。
到此为止，安装就完成了，可以等待安装成功。
三.使用
1.vscode的eslint配置，使代码能够在ctrl+s的时候自动格式化：
在vue-app目录县新建文件夹.vscode文件，再在.vscode目录下新建settings.json，文件内容如下：
tips：此配置包含了.vue文件.styl文件typescript的代码缩进
{"prettier.printWidth": 160,"prettier.tabWidth": 2,"prettier.semi": false,"prettier.singleQuote": true,"prettier.disableLanguages": [],"editor.tabSize": 2,"[vue]": {"editor.formatOnSave": true},"[typescript]": {"editor.formatOnSave": true,},"[stylus]": {"editor.formatOnSave": true,},"stylusSupremacy.insertColons": false,"stylusSupremacy.insertSemicolons": false,"stylusSupremacy.insertBraces": false,"languageStylus.useSeparator": false,
}
- 这样做：
表示vscode在读取到vue-app项目是，回去查找.vscode下的settings.json配置并应用。必须禁用插件：eslint
2.使用pug
yarn add pug pug-plain-loader --dev
- 使用
yarn安装pug和pug-plain-loader；（没有yarn的自行百度安装 --dev：安装到开发环境- 使用：打开
App.vue文件，将文件修改为下面这样既可。
<template lang="pug">#app#navrouter-link(to="/") Homerouter-link(to="/about") Aboutrouter-view</div>
</template>
四、常见的一些问题
0.其他一些eslint配置都可以在packge.json文件中的eslintConfig下的rules下配置
1.console.log(1)报错：
找到packge.json文件中的eslintConfig下的rules：
"no-console": "off"
参考文献：
安装
eslint配置
