目标
读Vue-cli的源码以及webpack模板的源码，理清相互的调用关系
上图简单的给出了利用Vue-cli生成项目代码的整体过程。在使用命令vue init的时候，实际是调用Vue-cli中封装的（npm link）Nodejs文件。然后就是进行一系列的与用户交互，进而完成初始化和静态站点的生成。
Vue-cli与webpack的关系分解
-
用户使用
vue init命令准备利用脚手架生成代码框架vue init webpack projectName -
在
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这个命令实际上是调用了bin/vue-init这个文件，后续就是该文件的进一步的执行。
-
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源码的过程中，需要重点关注几个模块，这几个模块支撑了整个框架的运转。
-
commander -------
node.js命令行界面的完整解决方案 -
inquirer -------为
node.js做一个可嵌入式的美观的命令行界面 - handlebars -------模板渲染引擎
- metalsmith -------静态网站生成器
- generate.js -------项目生成的最核心模块
- options.js -------读取模板配置文件中的相关数据用于生成项目
总结
这篇文章并没有很细致和带大家一起走到源码里面去，更多的是站在外面，从整体上把握一下方向，这也是给各位同学的建议，在看源码的时候，不要一头扎进去，而是先总体上把握整个流程，然后再在每个点切进去来看。
参考：Vue-cli实现原理
