Element UI 1.x 升级到 2.x 的关键步骤与避坑指南

Element UI 1.x 升级到 2.x 的关键步骤

项目维护中，框架升级是常有的事。Element UI 从 1.x 迁移到 2.x 虽然不算复杂，但有几个关键点容易踩坑，导致样式错乱或组件失效。

依赖版本调整

首先打开 package.json，将 element-ui 的版本更新为 2.0.9（或更高稳定版）。这里有个前提：你的 Vue 版本不能太低，建议同步升级到 2.5.2 以上，因为 Element 2.x 对 Vue 有最低版本要求。如果你项目中使用了 TypeScript 相关的装饰器，记得检查 vue-class-component 等工具的兼容性。

{
  "dependencies": {
    "element-ui": "2.0.9",
    "vue": "2.5.2",
    "vue-router": "3.0.1",
    "vuex": "3.0.0"
  },
  "devDependencies": {
    "vue-class-component": "^6.0.0",
    "vue-loader": "^13.3.0",
    "vue-property-decorator": "^6.0.0",
    "vue-template-compiler": "2.5.2"
  }
}

入口文件配置

在 main.js 里，样式的引入路径变了。1.x 时代可能直接引用了默认主题，2.x 明确指向了 。另外，插件的注册顺序很重要，确保 Vue 实例化后再使用 。