【Vue】vue-cli源码分析

本文分析了vue-cli的源码,从处理命令行参数开始,详细探讨了Creator的实例化过程,包括构造函数中生成的选项参数,执行create方法时的预设配置和插件生成。最后,概述了Generator如何生成插件以及最后的操作,如安装额外依赖和git初始化。
摘要由CSDN通过智能技术生成

vue-cli源码版本为3.1.3

命令行工具入口文件在packages/@vue/cli/bin/vue.js
vue-cli的核心命令是create,整体相对是比较复杂的,我们理解其中的主要逻辑就好。


处理命令行参数

// packages/@vue/cli/bin/vue.js
const chalk = require('chalk')
const semver = require('semver')
const requiredVersion = require('../package.json').engines.node

function checkNodeVersion (wanted, id) {
   
  if (!semver.satisfies(process.version, wanted)) {
   
    console.log(chalk.red(
      'You are using Node ' + process.version + ', but this version of ' + id +
      ' requires Node ' + wanted + '.\nPlease upgrade your Node version.'
    ))
    process.exit(1)
  }
}

checkNodeVersion(requiredVersion, 'vue-cli')

进程进来比较进程的node版本和vue-cli所要求的最低node版本,若不符合则提示更新node并退出进程

接着通过commander生成命令行,通过子命令create来处理vue create的命令,最后将项目名称和命令参数传给lib/create中的函数。


实例化核心方法Creator

async function create (projectName, options) {
   
  if (options.proxy) {
   
    process.env.HTTP_PROXY = options.proxy
  }

  const cwd = options.cwd || process.cwd()
  const inCurrent = projectName === '.'
  const name = inCurrent ? path.relative('../', cwd) : projectName
  const targetDir = path.resolve(cwd, projectName || '.')

	// 验证包名
  const result = validateProjectName(name)
  if (!result.validForNewPackages) {
   
    console.error(chalk.red(`Invalid project name: "${
     name}"`))
    result.errors && result.errors.forEach(err => {
   
      console.error(chalk.red(err))
    })
    exit(1)
  }

	// 根据参数是否强制移除文件
  if (fs.existsSync(targetDir)) {
   
    if (options.force) {
   
      await fs.remove(targetDir)
    } else {
   
      await clearConsole()
      if (inCurrent) {
   
        const {
    ok } = await inquirer.prompt([
          {
   
            name: 'ok',
            type: 'confirm',
            message: `Generate project in current directory?`
          }
        ])
        if 
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值