深入理解vue-cli

9.8学习总结之深入学习vue-cli
首先vue-cli有以下三个组件

CLI

参考资料：https://blog.csdn.net/sinat_17775997/article/details/83211759

https://blog.kaolafed.com/2017/06/16/vue-cli%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84/

CLI(@vue/cli)是一个全局安装的npm包，提供vue相关命令；

创建项目命令：vue init <template-name> <project-name>如：vue init webpack project-name

在生成的项目里面会有package.json文件，打开文件，看到有vue、vue-init、vue-list、vue-build命令

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

vue-init命令在bin目录下的vue-init,接着看vue-init文件，在vue-init中引入了众多模块，而vue-init主要作用就是根据指定模板生成项目原型。

var template = program.args[0]//获取模板名称
var hasSlash = template.indexOf('/') > -1
var rawName = program.args[1]//获取项目名称
var inPlace = !rawName || rawName === '.'
var name = inPlace ? path.relative('../', process.cwd()) : rawName
var to = path.resolve(rawName || '.')//即将生成的项目路径，如果已存在则会输出警告，让用户确认是否继续
var clone = program.clone || false//是否使用git clone方式下载模板
var tmp = path.join(home, '.vue-templates', template.replace(/\//g, '-'))
if (program.offline) {
  console.log(`> Use cached template at ${chalk.yellow(tildify(tmp))}`)
  template = tmp
}

用户选择继续后则会执行run函数，run函数主要检查了模板是否本地模板，然后获取下载模板，获取到模板后执行generate函数，generate函数是生成项目的核心，主要代码如下：

module.exports = function generate (name, src, dest, done) {
  var opts = getOptions(name, src)//读取src目录下的配置文件
  // Metalsmith读取template下所有资源
  var metalsmith = Metalsmith(path.join(src, 'template'))
  var data = Object.assign(metalsmith.metadata(), {
    destDirName: name,
    inPlace: dest === process.cwd(),
    noEscape: true
  })//将信息联合在一个data里面
  opts.helpers && Object.keys(opts.helpers).map(function (key) {
    Handlebars.registerHelper(key, opts.helpers[key])
  })
  var helpers = {chalk, logger}
  if (opts.metalsmith && typeof opts.metalsmith.before === 'function') {
    opts.metalsmith.before(metalsmith, opts, helpers)
  }
  // 一次使用askQuestions, filterFiles, renderTemplateFiles处理读取的内容
// askQuestions是会在终端里询问一些问题
  // 名称 描述 作者 是要什么构建 在meta.js 的opts.prompts当中
  // filterFiles 是用来过滤文件
  // renderTemplateFiles 是一个渲染插件
  metalsmith.use(askQuestions(opts.prompts))
    .use(filterFiles(opts.filters))
    .use(renderTemplateFiles(opts.skipInterpolation))
  if (typeof opts.metalsmith === 'function') {
    opts.metalsmith(metalsmith, opts, helpers)
  } else if (opts.metalsmith && typeof opts.metalsmith.after === 'function') {
    opts.metalsmith.after(metalsmith, opts, helpers)
  }
  // 将处理后的文件输出
  metalsmith.clean(false)
    .source('.') // start from template root instead of `./src` which is Metalsmith's default for `source`
    .destination(dest)
    .build(function (err, files) {
      done(err)
      if (typeof opts.complete === 'function') {
        var helpers = {chalk, logger, files}
        opts.complete(data, helpers)
      } else {
        logMessage(opts.completeMessage, data)
      }
    })
  return data
}

生成项目的过程主要有以下几个阶段：

初步获取配置（getOptions）-->读取模板内容（Metalsmith(path.join(src,'template'))）-->获取自定义配置（metalsmitn.use(askQuestions(opts.prompts))）-->FilterFiles通过获得的配置过滤文件（use(filterFiles(opts.filters))）-->渲染模板（use(renderTemplateFiles(opts skipInterpolation))）-->输出到指定目录（destination（dest））

1.getOptions主要是读取模板下的meta.js或meta.json，meta.json是必须文件，为cli提供多种信息，例如自定义的helper，自定义选项，文件过滤规则等等。

2.通过Metalsmith读取模板内容，需要注意的是，此时的模板内容还是未被处理的；

3.获取自定义配置：主要是通过async和inquire的配合完成手机用户自定义配置；

4.filterFiles:对文件进行过滤，通过minimatch进行文件匹配

5.渲染模板：通过consolidate.js配合handlebars渲染文件。

6.输出：直接输出

vue-list主要用于拉取vuejs-templates的模板信息并输出

vue-build则是通过一份webpack配置将项目跑起来，如果是入口仅是一个.vue组件，就使用默认的default-entry.es6加载组件并渲染。

CLI服务

在一个VUE CLI项目中，@vue/cli-service安装了一个名为vue-cli-service 的命令。在项目默认的package.json中有如下配置：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

 可以通过npm run serve或者yarn serve启用serve服务，vue-cli-service serve命令会启动一个基于webpack-dev-server的服务器，并附带模块热加载；

CLI插件

CLI插件是向vue项目中提供可选功能的npm包，Vue-cli插件以@veu-cli-plugin-(内建插件)或vue-cli-plugin-（社区插件）开头，当在项目内部运行vue-cli-server命令时，它会自动解析并加载package.json中列出的所有CLI插件。