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] // webpack
if (isLocalPath(template)) {
// 获取模版文件路径
const templatePath = getTemplatePath(template)
// 判断模版文件是否存在
if (exists(templatePath)) {
// 开始生成框架
generate(name, templatePath,