vue-cli 2 源码

@vue/cli: 3.11.0创建项目

vue create 项目名称

@vue/cli: 2.x.x 创建项目

vue init webpack yhh-project

脚手架初始化项目流程：

下载vue/cli@2 源码
下载完成后初始化

npm i

创建项目

vue init webpack yhh-project

vue-init：

bin/vue-init

#!/usr/bin/env node// 下载远程仓库
const download = require('download-git-repo')
// 命令行处理工具
const program = require('commander')
// 路径检查
const exists = require('fs').existsSync
// path
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')// 是否为本地路径
const isLocalPath = localPath.isLocalPath
// 本地模版存放路径
const getTemplatePath = localPath.getTemplatePath/*** Usage. 配置commander 使用方法 */
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 program.help()
}
help()/*** Settings. 配置项变量的设置*/
// 模板名称
let template = program.args[0] 
// 是否包含/
const hasSlash = template.indexOf('/') > -1
// 项目构建目录名称
const rawName = program.args[1]
// 是否存在当前路径名称
const inPlace = !rawName || rawName === '.'
const name = inPlace ? path.relative('../', process.cwd()) : rawName
const to = path.resolve(rawName || '.')
const clone = program.clone || false// 本地模板地址
const tmp = path.join(home, '.vue-templates', template.replace(/[\/:]/g, '-'))
if (program.offline) {console.log(`> Use cached template at ${chalk.yellow(tildify(tmp))}`)template = tmp
}/*** Padding.*/
// 结束行
console.log()
process.on('exit', () => {console.log()
})
// 命令： vue init webpack yhh-project
// const rawName = program.args[1] // yhh-project
// const inPlace = !rawName || rawName === '.' // false
// to : 项目名称文件路径 // User/../../yhh-project/
// 判断：当前项目名称不存在相同名称的文件夹时询问：在当前目录中生成项目？
//        否则询问：目标目录已存在，是否继续？
// inPlace : 是否为当前路径下构建项目
// exists(to) : 存在当前路径
if (inPlace || exists(to)) {inquirer.prompt([{type: 'confirm',message: inPlace? 'Generate project in current directory?': 'Target directory exists. Continue?',name: 'ok'}]).then(answers => {if (answers.ok) {run()}}).catch(logger.fatal)
} else {run()
}/*** Check, download and generate the project.*/
// init 主函数
function run () {// check if template is local// 检查是否为本地模版// let template = program.args[0] // webpackif (isLocalPath(template)) {// 获取模版文件路径const templatePath = getTemplatePath(template)// 判断模版文件是否存在if (exists(templatePath)) {// 开始生成框架generate(name, templatePath,