搭建Vue+Express双模板脚手架01

目标

读Vue-cli的源码以及webpack模板的源码，理清相互的调用关系

vue-cli和template之间的整体关系.jpg

上图简单的给出了利用Vue-cli生成项目代码的整体过程。在使用命令vue init的时候，实际是调用Vue-cli中封装的（npm link）Nodejs文件。然后就是进行一系列的与用户交互，进而完成初始化和静态站点的生成。

Vue-cli与webpack的关系分解

1. 用户使用vue init命令准备利用脚手架生成代码框架

   vue init webpack projectName

2. 在vue-cli的源码中可以看到package.json中有这段定义

   "bin": {
    "vue": "bin/vue",
    "vue-init": "bin/vue-init",
    "vue-list": "bin/vue-list"
     }
   

   就是因为这段定义，所以在我们全局安装vue-cli的时候，在我们的node的全局安装包的安装路径下生成了如下的几个文件（因为我设置了prefix为prefix = "D:\\nodejs\\node_global"，所以下面的文件在这个文件夹下面）

vue init命令文件.jpg

由此就知道vue init这个命令实际上是调用了bin/vue-init这个文件，后续就是该文件的进一步的执行。

3. vue-init文件中主要做了下面几件事情

   • 实现与用户的命令行交互，这里主要使用的是commander 和 inquirer 两个辅助包，inquirer主要是实现和用户交互，并记录用户的选择，commander 主要辅助生成命令的说明以及帮助，解析命令参数。

     const program = require('commander') 
     const inquirer = require('inquirer') 
     

   • 判断用户选择的是离线创建还是在线创建，这意味着是否需要去远程下载模板源码到指定的文件目录（C:\Users\10241958\.vue-templates\webpack），还是直接以offline的方式使用本地的webpack模板。

   • 最后就是根据模板中的配置文件mate.js，与用户完成一些交互，利用用户的选择来生成静态的项目目录。

   vue init流程图.jpg

重要的模块

在阅读Vue-vli源码的过程中，需要重点关注几个模块，这几个模块支撑了整个框架的运转。

1. commander -------node.js命令行界面的完整解决方案
2. inquirer -------为node.js做一个可嵌入式的美观的命令行界面
3. handlebars -------模板渲染引擎
4. metalsmith -------静态网站生成器
5. generate.js -------项目生成的最核心模块
6. options.js -------读取模板配置文件中的相关数据用于生成项目

总结

这篇文章并没有很细致和带大家一起走到源码里面去，更多的是站在外面，从整体上把握一下方向，这也是给各位同学的建议，在看源码的时候，不要一头扎进去，而是先总体上把握整个流程，然后再在每个点切进去来看。

参考：Vue-cli实现原理