在Element源码中跌跌撞撞：从V1.0.0到V2.0.0

Element源码浏览记录（掉坑记录）

从V1.0.0版本开始

我的Element源码之旅始于V1.0.0版本。我克隆了Element的仓库，切换到v1.0.0标签，并运行npm run build:file命令来初始化文件。一切看起来都很顺利，但当我想运行npm run dev命令启动开发服务器时，却遇到了第一个坑。控制台报出一个错误：

> vue-cli-service serve
找不到命令 "vue-cli-service"。
检查 npm 包是否存在并安装 npm install。

我意识到，在V1.0.0版本中，使用的是Vue CLI 2.x，而我安装的却是Vue CLI 3.x。因此，我需要切换到Vue CLI 2.x才能继续。

切换到Vue CLI 2.x

我按照官方文档的指示，将Vue CLI全局安装为2.x版本：

npm install -g vue-cli@2.x

然后，我再次运行npm run dev命令，这次终于成功启动了开发服务器。

在V1.0.0版本中探索

在V1.0.0版本中，我浏览了Element的组件代码，并尝试理解它们的实现原理。虽然有些地方还不甚理解，但我还是收获了很多知识。

升级到V2.0.0版本

当我想进一步探索Element时，我发现了一个新的版本：V2.0.0。这个版本使用了Vue CLI 3.x，并对代码结构和API进行了重大调整。为了继续我的探索之旅，我需要升级到V2.0.0版本。

升级过程中的坑

在升级过程中，我遇到了第二个坑。当我运行npm run build:file命令时，控制台报出一个错误：

> element-webpack-chain build:file
Unknown compilation target.

经过一番搜索，我发现这个错误是由于V2.0.0版本中使用了一种新的构建工具：Webpack Chain。为了解决这个问题，我需要安装Webpack Chain并将其添加到webpack.config.js文件中。

在V2.0.0版本中探索

在解决完这些问题后，我终于可以继续我的Element源码之旅了。在V2.0.0版本中，我发现了很多新特性和改进，比如更清晰的代码结构、更丰富的API，以及对Web Components的支持。

总结

在探索Element源码的旅途中，我遇到了几个大坑，但最终还是收获了很多知识和经验。希望我的经历能够帮助你避免在Element源码中栽跟头。

最后，我想说的是，Element是一个非常优秀的UI框架，值得我们学习和使用。如果你想深入了解Element的实现原理，不妨也来一次Element源码之旅吧！