抛弃vue-webpack-template，踩坑Vue-Cli创建vue项目

官方指导网站https://cli.vuejs.org/

一、全局安装@vue/cli

//本人包管理工具使用yarn
yarn global add @vue/cli

安装完成

二、创建vue项目

vue create projectName

三、开始踩坑

1 选择CSS预处理器，我这里选择sass

//参考cli.vuejs.org
yarn add sass sass-loader

使用sass的特性@mixin以及@include混入

2. eslint配置

默认配置在package.json文件里面，rules里面配置自己习惯的规则就好

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "quotes":[2,"double"],
      "indent":[2,4]
    }
  },

3. 加入editorConfig来管理编辑器风格

以前都是webpack模板里面自带的根目录下的.editorconfig文件，现在就自己手动创建吧，

详细配置参考官网editorconfig.org，自己只配了最基础的

root = true

[*]
indent_size = 4
indent_style = space

小技巧： vue inspect > output.js 快速输出查看vue整体项目的配置

起步：项目根目录下创建vue.config.js

a. 配置类似webpack alias

const path = require("path")

module.exports = {
    chainWebpack:(config)=>{
        config.resolve.alias
            .set("static",path.join(__dirname,"src/assets/"))
    }
}

输出output.js可以看到alias里面多了static

---

补充自己的配置

// vue.config.js
// 首先关键的是加入alias,这样自己import的时候就可以简写
	chainWebpack:(config)=>{
	    config.resolve.alias
	        .set("static",path.join(__dirname,"src/assets/"))
	}

//  jsconfig.json
//  配置完成后重启vscode 此时可以通过control+leftClick跳转进目标文件,
//  默认只能默认跳转js文件，跳转vue需要import时写全文件格式后缀
{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"],
            "static/*":["src/assets/*"]
        },
        "allowSyntheticDefaultImports": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}