阅读量:0
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,