总结

分析了整个 vue create 命令,感受比较明显的两点就是

  • @vue/cli 3.0vue-cli 2.0 真的复杂的太多了
  • @vue/cli 3.0 基于插件的架构做的真心不错

虽然 vue create 真个过程比较复杂,但是从源码一部分一部分地进行分析,会发现真的很复杂,哈哈,开个玩笑😊😊会发现其实整个逻辑十分地清楚, 函数模块化的思想体现的十分明显。看完了源码 vue create 命令总的来说就实例化了2个类,然后各自调了一个方法。当执行 create 命令时会创建一个 Creator 实例, 然后调用其 create 方法。在 create 方法中又会创建一个 Generator 实例,然后再调用其 generator 方法,只是可能方法有点复杂😆😆。 在 @vue/cli 3.0 中使用了大量的 async 函数,这也避免了回调地狱,让代码拥有很高地可读性。

初始化整个项目会交给各个插件去完成。比如核心插件 @vue/cli-service 会渲染整个项目的文件,@vue/cli-plugin-eslint 会进行 eslint 的一些配置, @vue/cli-plugin-unit-jest 插件也会进行一些 jest 的配置,各个功能都会交给对应的插件去完成,而 GeneratorAPI 又允许一个插件的 generatorpackage.json 注入额外的依赖或字段,并向项目中添加文件,这也让插件对整个项目拥有更高地可配置性。

对于 @vue/cli 3.0 基于插件构建的思想可能看了一遍源码不是很熟悉,可以尝试再看一遍,这样你就会慢慢地感受到这种思想,另外就是如果你看了 vue create 的代码后你还是不是很清楚的话,你可以选择用 vue create 创建几个项目,将这个流程和代码的执行顺序结合起来,可能会得到不一样的收获。