將vue-cli 2.x的項目升級到3.x

嘗試將vue-cli 2.x的項目升級到3.x，記錄一下升級過程，和遇到的坑

1. 直接複製替換src文件夾
2. 安裝項目須要的依賴 (能夠將原來package.json dependencies下須要的直接複製過來，而後運行npm i)
3. 安裝完後運行npm run serve （若是啓動服務不習慣npm run serve，能夠將package.json的serve改爲dev）

---

項目是啓動了，頁面確是空白的，出現以下信息

報錯緣由：引入vue時，採用裏runtime形式的文件

要將這個錯誤引用糾正成vue/dist.vue.esm.js

查看cli2.X的版本，在webpack.base.conf.js配置文件中已經添加了這個代碼，以下圖

解決方法：
在項目的根目錄下添加配置文件vue.config.js，將上圖這段代碼複製粘貼到vue.config.js中，而後重啓服務
代碼以下：

const path = require('path')
function resolve (dir) {
    return path.join(__dirname,dir)
}

module.exports = {
    configureWebpack: config => {
        config.resolve = {
           extensions: ['.js', '.vue', '.json'],
            alias: {
              'vue$': 'vue/dist/vue.esm.js',
              '@': resolve('src'),
            }
        }
    },
}

---

使用jquery報錯，原來2.x添加第三方插件的方法不行了

解決方案：
main.js 裏原來用import $ from "jquery"引用的改爲

const $ = require("jquery");
window.$ = $;

緣由請看下圖：

基於jquery的插件使用require()

---

遠行後，jquery能夠用了，但eslint一直報'$' is not defined
解決方法1：在.eslintrc.js文件裏env:{}里加jquery: true

解決方法2： 在使用$的頁面加上/* global $ */

---

更新中...