Vue-cli原理分析

背景

在平时工作中会有遇到许多以相同模板定制的小程序，因此想自己建立一个生成模板的脚手架工具，以模板为基础构建对应的小程序，而平时的小程序都是用mpvue框架来写的，因此首先先参考一下Vue-cli的原理。知道原理之后，再定制自己的模板脚手架肯定是事半功倍的。

在说代码之前我们首先回顾一下Vue-cli的使用，我们通常使用的是webpack模板包，输入的是以下代码。

vue init webpack [project-name]
复制代码

在执行这段代码之后，系统会自动下载模板包，随后会询问我们一些问题，比如模板名称，作者，是否需要使用eslint，使用npm或者yarn进行构建等等，当所有问题我们回答之后，就开始生成脚手架项目。

我们将源码下载下来，源码仓库点击这里，平时用的脚手架还是2.0版本，要注意，默认的分支是在dev上，dev上是3.0版本。

我们首先看一下package.json，在文件当中有这么一段话

{
 "bin": {
 "vue": "bin/vue",
 "vue-init": "bin/vue-init",
 "vue-list": "bin/vue-list"
 }
}
复制代码

由此可见，我们使用的命令 vue init，应该是来自bin/vue-init这个文件，我们接下来看一下这个文件中的内容

bin/vue-init

const download = require('download-git-repo')
const program = require('commander')
const exists = require('fs').existsSync
const path = require('path')
const ora = require('ora')
const home = require('user-home')
const tildify = require('tildify')
const chalk = require('chalk')
const inquirer = require('inquirer')
const rm = require('rimraf').sync
const logger = require('../lib/logger')
const generate = require('../lib/generate')
const checkVersion = require('../lib/check-version')
const warnings = require('../lib/warnings')
const localPath = require('../lib/local-path')
复制代码

download-git-repo 一个用于下载git仓库的项目的模块 commander 可以将文字输出到终端当中 fs 是node的文件读写的模块 path 模块提供了一些工具函数，用于处理文件与目录的路径 ora 这个模块用于在终端里有显示载入动画 user-home 获取用户主目录的路径 tildify 将绝对路径转换为波形路径 比如/Users/sindresorhus/dev → ~/dev inquirer 是一个命令行的回答的模块，你可以自己设定终端的问题，然后对这些回答给出相应的处理 rimraf 是一个可以使用 UNIX 命令 rm -rf的模块 剩下的本地路径的模块其实都是一些工具类，等用到的时候我们再来讲

// 是否为本地路径的方法 主要是判断模板路径当中是否存在 `./`
const isLocalPath = localPath.isLocalPath
// 获取模板路径的方法 如果路径参数是绝对路径 则直接返回 如果是相对的 则根据当前路径拼接
const getTemplatePath = localPath.getTemplatePath
复制代码

/**
 * Usage.
 */
program
 .usage('<template-name> [project-name]')
 .option('-c, --clone', 'use git clone')
 .option('--offline', 'use cached template')
/**
 * Help.
 */
program.on('--help', () => {
 console.log(' Examples:')
 console.log()
 console.log(chalk.gray(' # create a new project with an official template'))
 console.log(' $ vue init webpack my-project')
 console.log()
 console.log(chalk.gray(' # create a new project straight from a github template'))
 console.log(' $ vue init username/repo my-project')
 console.log()
})
/**
 * Help.
 */
function help () {
 program.parse(process.argv)
 if (program.args.length < 1) return prog