create-vue 生成式脚手架源码解析

文章目录

命令交互

输出渐变标题

javascript 复制代码
async function init() {
  // process.stdout.isTTY 是否在终端运行
  // process.stdout.getColorDepth() 支持的颜色数量
  console.log(
    process.stdout.isTTY && process.stdout.getColorDepth() > 8
      ? // banners.gradientBanner 彩色文字
        banners.gradientBanner
      : banners.defaultBanner
  )
  
  ...
}

banners

javascript 复制代码
const defaultBanner = 'Vue.js - The Progressive JavaScript Framework'

// generated by the following code:
//
// require('gradient-string')([
//   { color: '#42d392', pos: 0 },
//   { color: '#42d392', pos: 0.1 },
//   { color: '#647eff', pos: 1 }
// ])('Vue.js - The Progressive JavaScript Framework'))
//
// Use the output directly here to keep the bundle small.
const gradientBanner =
  '\x1B[38;2;66;211;146mV\x1B[39m\x1B[38;2;66;211;146mu\x1B[39m\x1B[38;2;66;211;146me\x1B[39m\x1B[38;2;66;211;146m.\x1B[39m\x1B[38;2;66;211;146mj\x1B[39m\x1B[38;2;67;209;149ms\x1B[39m \x1B[38;2;68;206;152m-\x1B[39m \x1B[38;2;69;204;155mT\x1B[39m\x1B[38;2;70;201;158mh\x1B[39m\x1B[38;2;71;199;162me\x1B[39m \x1B[38;2;72;196;165mP\x1B[39m\x1B[38;2;73;194;168mr\x1B[39m\x1B[38;2;74;192;171mo\x1B[39m\x1B[38;2;75;189;174mg\x1B[39m\x1B[38;2;76;187;177mr\x1B[39m\x1B[38;2;77;184;180me\x1B[39m\x1B[38;2;78;182;183ms\x1B[39m\x1B[38;2;79;179;186ms\x1B[39m\x1B[38;2;80;177;190mi\x1B[39m\x1B[38;2;81;175;193mv\x1B[39m\x1B[38;2;82;172;196me\x1B[39m \x1B[38;2;83;170;199mJ\x1B[39m\x1B[38;2;83;167;202ma\x1B[39m\x1B[38;2;84;165;205mv\x1B[39m\x1B[38;2;85;162;208ma\x1B[39m\x1B[38;2;86;160;211mS\x1B[39m\x1B[38;2;87;158;215mc\x1B[39m\x1B[38;2;88;155;218mr\x1B[39m\x1B[38;2;89;153;221mi\x1B[39m\x1B[38;2;90;150;224mp\x1B[39m\x1B[38;2;91;148;227mt\x1B[39m \x1B[38;2;92;145;230mF\x1B[39m\x1B[38;2;93;143;233mr\x1B[39m\x1B[38;2;94;141;236ma\x1B[39m\x1B[38;2;95;138;239mm\x1B[39m\x1B[38;2;96;136;243me\x1B[39m\x1B[38;2;97;133;246mw\x1B[39m\x1B[38;2;98;131;249mo\x1B[39m\x1B[38;2;99;128;252mr\x1B[39m\x1B[38;2;100;126;255mk\x1B[39m'

export { defaultBanner, gradientBanner }

解析命令行参数

javascript 复制代码
async function init() {
  const cwd = process.cwd()
  
  // possible options:
  // --default
  // --typescript / --ts
  // --jsx
  // --router / --vue-router
  // --pinia
  // --with-tests / --tests (equals to `--vitest --cypress`)
  // --vitest
  // --cypress
  // --nightwatch
  // --playwright
  // --eslint
  // --eslint-with-prettier (only support prettier through eslint for simplicity)
  // --force (for force overwriting)

  // 解析命令行参数
  const argv = minimist(process.argv.slice(2), {
    alias: {
      typescript: ['ts'], // 别名映射, typescript 还会被映射成 ts
      'with-tests': ['tests'],
      router: ['vue-router']
    },
    string: ['_'],
    // all arguments are treated as booleans
    boolean: true
  })

  // if any of the feature flags is set, we would skip the feature prompts
  // 是否命令行传入了参数,传入了则跳过后续交互式选择
  const isFeatureFlagsUsed =
    typeof (
      argv.default ??
      argv.ts ??
      argv.jsx ??
      argv.router ??
      argv.pinia ??
      argv.tests ??
      argv.vitest ??
      argv.cypress ??
      argv.nightwatch ??
      argv.playwright ??
      argv.eslint
    ) === 'boolean'
  
  // 获取创建的文件名
  let targetDir = argv._[0]
  console.log('@targetDir', targetDir)
  const defaultProjectName = !targetDir ? 'vue-project' : targetDir

  const forceOverwrite = argv.force

}

生成模版

结尾提示

相关推荐
韩立学长2 分钟前
【开题答辩实录分享】以《智慧校园勤工俭学信息管理系统的设计与实现》为例进行答辩实录分享
vue.js·spring boot·微信小程序
why技术10 分钟前
1K+Star的开源项目能给一个在校大学生带来什么?
前端·人工智能·后端
@PHARAOH11 分钟前
HOW - localstorage 超时管理方案
前端·javascript·vue.js
im_AMBER26 分钟前
React 05
开发语言·前端·javascript·笔记·学习·react.js·前端框架
showker28 分钟前
ecstore等产品开启缓存-后台及前台不能登录原因-setcookie+session问题
java·linux·前端
DokiDoki之父1 小时前
前端速通—Vue_简介 & 第一个Vue程序 & el:挂载点 & data:数据对象 & Vue指令
javascript·vue.js·ecmascript
csj502 小时前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少2 小时前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
好玩的Matlab(NCEPU)2 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰2 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome