一.安装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-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,
}
}
}
这样做：
表示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文件，将文件修改为下面这样既可。
#app
#nav
router-link(to="/") Home
router-link(to="/about") About
router-view
1.console.log(1)报错：
找到packge.json文件中的eslintConfig下的rules：