Element UI 升级

最近要重构一个五年左右的 Vue 老项目，依赖库的版本都比较过时了，UI 风格和设计语言在现在看已经不忍直视。所以准备升级一下，给他整一个老树开花，虎虎生风。

"dependencies": {
	"element-ui": "1.0.9",
	"vue": "2.1.4",
	"vue-router": "^2.0.0",
	...
},
"devDependencies": {
	"vue-loader": "10.0.0",
	"vue-template-compiler": "2.1.4",
	...
}

Element UI 1.x 已经停止维护了，我打算先升级到 2.x

$ npm uninstall element-ui            # 卸载
$ npm install element-ui@2.12.0 -S    # 重新安装指定版本

❌ 升级后编译报错：can’t find module 'element-ui/lib/theme-default/index.css’；因为原来的 theme-default 文件已经改为 theme-chalk，所以只需要修改一下路径

// main.js

- import 'element-ui/lib/theme-default/index.css'
+ import 'element-ui/lib/theme-chalk/index.css'

❌ 界面渲染失败，控制台报错：_v 属性不存在。这里需要注意 Element 2.x 最低兼容 vue v2.5.x，因此升级 vue 到 2.5 以上

$ npm uninstall vue
$ npm install vue@2.6.12

❌ 编译报错，如下；vue-template-compiler 是 vue 模版编译插件，需要与 vue 版本保持一致，升级到 2.6.12

$ npm uninstall vue-template-compiler
$ npm install vue-template-compiler@2.6.12

❌ 控制台报错，el-x 元素未定义：须手动挂载 Elemet 到 Vue 全局

// main.js

import Element from 'element-ui'
...
Vue.use(Element)

❌ 编译报错：TypeError: VueLoaderPlugin is not a constructor

按照官方最新的使用文档，需要更改 webpack.conf 并指定 loader 插件，如下：

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

后发现当前 vue-loader 版本较低（v10.3.0），查看历史文档发现有所不同：

// webpack.config.js

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',  // 配置这里
      options: {
        loaders: {
          js: 'babel-loader!eslint-loader'
        }
      }
    }
  ]
}

编译通过，控制台也没有错误和警告，除了有些 UI 不显示，如 Table 表格的某些字段，应该是 UI 库升级后 API 不兼容导致的，后面再慢慢修复吧。至此，老项目已经升级成功了！