# vue-cli2 to vue-cli3

# why

# 新原因：

vue-cli3 已经升级到 webpack4，性能优化、构建速度提升。
将 webpack 的复杂配置隐藏到依赖中，减少复杂配置。
eslint 配置，cli3 中加入了 Airbnb 等规则，这次构建使用了 Airbnb 的规则，使代码更加规范，同时会提升 js 的编写能力。
引入了 test，但是这个还是根据项目情况，酌情使用。

# 历史遗留问题：

IdcUI 项目建立初期, eslint手动去除了，后期发现代码混乱、不可控，所以恰逢 cli3 升级这个契机，可以矫正之前的问题。
IdcUI 项目建立初期，引入了bootstrap 和 angle.css, 但是后期发现 angle.css 使用的较少，但是 angle.css，这个 css 库是 bootstrap+angle自己的部分内容，所以是没有必要的，并且占用空间较大、样式反复覆盖，影响页面加载，这次会删除。

# 迁移过程

本地安装 vue-cli3，创建项目 IdcUI-cli3，创建时选择 vuex、vue-router、Airbnb lint 等等。
将 IdcUI 的文件，复制一份到 IdcUI-cli3 中，整理下 package.json 中的依赖，暂时项目依赖还是用原来的，暂时不升级、否则可能会死人、后期脚手架稳定后再考虑升级项目依赖（比如 iview3.0）
调整 eslint 规则，虽然 Airbnb 大部分规则是合适的，但是少部分还是可以去掉的。
调整 IDE 的配置，VS Code 的配置。
调整静态资源的路径。
根据eslint规则，修改业务代码。

# 迁移问题解决

# eslint 规则

package.json下的eslintConfig

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/airbnb"
    ],
    "rules": {
      "max-len": "off",
      "vue/no-parsing-error": [
        2,
        {
          "x-invalid-end-tag": false
        }
      ],
      "no-param-reassign": [
        "error",
        {
          "props": false
        }
      ],
      "consistent-return": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

暂时去掉git hook，待将所有问题修改完，再次开启。

"gitHooks": {
    "pre-commit": "lint-staged"
  },

初期修复时，可以使用

// 指定目录，非常方便
npm run lint src/views/index/

# VS Code 配置

{
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "prettier.arrowParens": "always",
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.formatOnType": true,

  "prettier.tabWidth": 2,
  "prettier.printWidth": 100,
  "editor.detectIndentation": true,
  "vetur.validation.template": false,
}

# eslint问题汇总

(array-callback-return) forEach/map (opens new window)

注意：

不能热更新，解决（ npm config set registry https://registry.npm.taobao.org）

← 组件的重写 vue3 →