{"id":13817271,"url":"https://github.com/chinanf-boy/vue-cli-explain","last_synced_at":"2026-05-02T05:05:55.025Z","repository":{"id":90548586,"uuid":"132402768","full_name":"chinanf-boy/vue-cli-explain","owner":"chinanf-boy","description":"explain : vue-cli 快到3.0正式版了, 再次挖坑","archived":false,"fork":false,"pushed_at":"2018-05-19T12:25:12.000Z","size":36,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-11T22:49:44.629Z","etag":null,"topics":["cli","explain","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chinanf-boy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-05-07T03:34:15.000Z","updated_at":"2018-05-19T12:25:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"d77ff1bc-c9d2-4e47-a7af-3bd16b7a83bb","html_url":"https://github.com/chinanf-boy/vue-cli-explain","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chinanf-boy/vue-cli-explain","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvue-cli-explain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvue-cli-explain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvue-cli-explain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvue-cli-explain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chinanf-boy","download_url":"https://codeload.github.com/chinanf-boy/vue-cli-explain/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fvue-cli-explain/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262614457,"owners_count":23337277,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","explain","vue"],"created_at":"2024-08-04T06:00:38.881Z","updated_at":"2026-05-02T05:05:54.962Z","avatar_url":"https://github.com/chinanf-boy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Vue-cli\n\n「 desc 」\n\n[![explain](http://llever.com/explain.svg)](https://github.com/chinanf-boy/Source-Explain)\n    \nExplanation\n\n\u003e \"version\": \"3.0.0-beta.9\",\n\n\n[github source](https://github.com/vuejs/vue-cli)\n\n~~[english](./README.en.md)~~\n\n---\n\n## 使用\n\n``` bash\nvue create my-project\n```\n\n---\n\n本目录\n\n---\n\n## package.json\n\n请不要用单一库, 来看待 `vue-cli`\n\n我们下载时使用 `npm install -g @vue/cli`\n\n\u003e @vue 什么东西, 你可以将 `@vue - 组织` | `cli - 其中之一产品`\n\n构成 多个库`packages`的形式, 是使用[`lerna.json`- 一个用于管理多个包的JavaScript项目的工具。](https://github.com/lerna/lerna)\n\n## @vue/cli\n\n`packages/@vue/cli/package.json`\n\n``` js\n  \"name\": \"@vue/cli\", // 上传 npm 名字\n  \"bin\": {\n    \"vue\": \"bin/vue.js\" // 命令\n  },\n```\n\n### bin/vue.js\n\n\n## 1. node-版本-要求\n\n代码 11-17\n\n``` js\nif (!semver.satisfies(process.version, requiredVersion)) {\n  console.log(chalk.red(\n    `You are using Node ${process.version}, but this version of vue-cli ` +\n    `requires Node ${requiredVersion}.\\nPlease upgrade your Node version.`\n  ))\n  process.exit(1)\n}\n```\n\n- 1.1 [semver](https://github.com/npm/node-semver)\n\nnpm的语义版本\n\n---\n\n## 2. 调试模式\n\n代码 19-27\n\n``` js\n// enter debug mode when creating test repo\nif (\n  slash(process.cwd()).indexOf('/packages/test') \u003e 0 \u0026\u0026 (\n    fs.existsSync(path.resolve(process.cwd(), '../@vue')) ||\n    fs.existsSync(path.resolve(process.cwd(), '../../@vue'))\n  )\n) {\n  process.env.VUE_CLI_DEBUG = true\n}\n```\n\n- 2.1 [slash](https://github.com/sindresorhus/slash)\n\n统一 `window` 和 `unix` 斜号\n\n---\n\n## 3. 命令解析\n\n代码 29-34\n\n``` js\nconst program = require('commander')\nconst loadCommand = require('../lib/util/loadCommand')\n\nprogram\n  .version(require('../package').version)\n  .usage('\u003ccommand\u003e [options]')\n```\n\n---\n\n\u003e 命令缩影\n\n- [X] __vue create__ ` [options] \u003capp-name\u003e 创建一个由vue-cli-service支持的新项目`\n- [x] __vue add__ ` \u003cplugin\u003e [pluginOptions] 安装插件并在已创建的项目中调用其生成器` ⬇️\n- [x] __vue invoke__ ` \u003cplugin\u003e [pluginOptions] 在已创建的项目中调用插件的生成器`   ⬆️\n- [x] __vue inspect__ ` [options] [paths...] 使用vue-cli-service检查项目中的webpack配置`\n- [x] __vue serve__ ` [options] [entry] 在零配置下以开发模式提供.js或.vue文件`\n- [x] __vue build__ ` [options] [entry] 在生产模式下使用零配置构建.js或.vue文件`\n- [ ] __vue init__ ` \u003ctemplate\u003e \u003capp-name\u003e 从远程模板（传统API，需要@vue）生成项目`\n\n---\n\n### 3.1 vue create\n\n代码 36-50\n\n\u003cdetails\u003e\n\n\n``` js\nprogram\n  .command('create \u003capp-name\u003e')\n  .description('create a new project powered by vue-cli-service')\n  .option('-p, --preset \u003cpresetName\u003e', 'Skip prompts and use saved or remote preset')\n  .option('-d, --default', 'Skip prompts and use default preset')\n  .option('-i, --inlinePreset \u003cjson\u003e', 'Skip prompts and use inline JSON string as preset')\n  .option('-m, --packageManager \u003ccommand\u003e', 'Use specified npm client when installing dependencies')\n  .option('-r, --registry \u003curl\u003e', 'Use specified npm registry when installing dependencies (only for npm)')\n  .option('-g, --git [message]', 'Force / skip git intialization, optionally specify initial commit message')\n  .option('-f, --force', 'Overwrite target directory if it exists')\n  .option('-c, --clone', 'Use git clone when fetching remote preset')\n  .option('-x, --proxy', 'Use specified proxy when creating project')\n  .action((name, cmd) =\u003e {\n    require('../lib/create')(name, cleanArgs(cmd))\n  })\n\n```\n\n\u003c/details\u003e\n\n[ \u003e\u003e\u003e create -explain ](./create.md)\n\n---\n\n### 3.2 vue add\n\n代码 52-58\n\n\u003cdetails\u003e\n\n``` js\nprogram\n  .command('add \u003cplugin\u003e [pluginOptions]')\n  .allowUnknownOption()\n  .description('install a plugin and invoke its generator in an already created project')\n  .action((plugin) =\u003e {\n    require('../lib/add')(plugin, minimist(process.argv.slice(3)))\n  })\n```\n\n- [minimist](https://github.com/substack/minimist)\n\n解析参数选项\n\n\n\u003c/details\u003e\n\n[ \u003e\u003e\u003e add-explain ](./add.md)\n\n---\n\n### 3.3 vue invoke\n\n代码 60-66\n\n\u003cdetails\u003e\n\n``` js\nprogram\n  .command('invoke \u003cplugin\u003e [pluginOptions]')\n  .allowUnknownOption()\n  .description('invoke the generator of a plugin in an already created project')\n  .action((plugin) =\u003e {\n    require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))\n  })\n```\n\n\n\u003c/details\u003e\n\n[ \u003e\u003e\u003e invoke-explain ](./invoke.md)\n\n---\n\n### 3.4 vue inspect\n\n代码 68-75\n\n\u003cdetails\u003e\n\n``` js\nprogram\n  .command('inspect [paths...]')\n  .option('--mode \u003cmode\u003e')\n  .option('--rule \u003cruleName\u003e', 'inspect a specific module rule')\n  .option('--plugin \u003cpluginName\u003e', 'inspect a specific plugin')\n  .option('--rules', 'list all module rule names')\n  .option('--plugins', 'list all plugin names')\n  .option('-v --verbose', 'Show full function definitions in output')\n  .description('inspect the webpack config in a project with vue-cli-service')\n  .action((paths, cmd) =\u003e {\n    require('../lib/inspect')(paths, cleanArgs(cmd))\n  })\n```\n\n- [cleanArgs](#cleanargs)\n\n清理没有命令\n\n\u003c/details\u003e\n\n[ \u003e\u003e\u003e inspect-explain ](./inspect.md)\n\n---\n\n### 3.5 vue serve\n\n代码 \n\n\u003cdetails\u003e\n\n``` js\nprogram\n  .command('serve [entry]')\n  .description('serve a .js or .vue file in development mode with zero config')\n  .option('-o, --open', 'Open browser')\n  .action((entry, cmd) =\u003e {\n    loadCommand('serve', '@vue/cli-service-global').serve(entry, cleanArgs(cmd))\n  })\n```\n\n- [loadCommand](#loadcommand)\n\n\n\n\u003c/details\u003e\n\n[ \u003e\u003e\u003e serve-explain ](./serve.md)\n\n---\n\n### 3.6 vue build\n\n代码 85-93\n\n\u003cdetails\u003e\n\n``` js\nprogram\n  .command('build [entry]')\n  .option('-t, --target \u003ctarget\u003e', 'Build target (app | lib | wc | wc-async, default: app)')\n  .option('-n, --name \u003cname\u003e', 'name for lib or web-component mode (default: entry filename)')\n  .option('-d, --dest \u003cdir\u003e', 'output directory (default: dist)')\n  .description('build a .js or .vue file in production mode with zero config')\n  .action((entry, cmd) =\u003e {\n    loadCommand('build', '@vue/cli-service-global').build(entry, cleanArgs(cmd))\n  })\n```\n\n\n\u003c/details\u003e\n\n[ \u003e\u003e\u003e build-explain ](./build.md)\n\n---\n\n### 3.7  vue init\n\n代码 \n\n\u003cdetails\u003e\n\n``` js\nprogram\n  .command('init \u003ctemplate\u003e \u003capp-name\u003e')\n  .description('generate a project from a remote template (legacy API, requires @vue/cli-init)')\n  .option('-c, --clone', 'Use git clone when fetching remote template')\n  .action(() =\u003e {\n    loadCommand('init', '@vue/cli-init')\n  })\n```\n\n\n\u003c/details\u003e\n\n[ \u003e\u003e\u003e init-explain ](./init.md)\n\n---\n\n### 3.8 命令溢出\n\n代码 103-110\n\n\u003cdetails\u003e\n\n``` js\n// output help information on unknown commands\nprogram\n  .arguments('\u003ccommand\u003e')\n  .action((cmd) =\u003e {\n    program.outputHelp()\n    console.log(`  ` + chalk.red(`Unknown command ${chalk.yellow(cmd)}.`))\n    console.log()\n  })\n```\n\n\n\u003c/details\u003e\n\n---\n\n### 3.9 命令帮助\n\n代码 112-119\n\n\u003cdetails\u003e\n\n``` js\n// add some useful info on help\nprogram.on('--help', () =\u003e {\n  console.log()\n  console.log(`  Run ${chalk.cyan(`vue \u003ccommand\u003e --help`)} for detailed usage of given command.`)\n  console.log()\n})\n\nprogram.commands.forEach(c =\u003e c.on('--help', () =\u003e console.log()))\n\n```\n\n\n\u003c/details\u003e\n\n---\n\n### 3.10 命令错误\n\n代码 121-161\n\n\u003cdetails\u003e\n\n``` js\n// enhance common error messages\nconst enhanceErrorMessages = (methodName, log) =\u003e {\n  program.Command.prototype[methodName] = function (...args) {\n    if (methodName === 'unknownOption' \u0026\u0026 this._allowUnknownOption) {\n      return\n    }\n    this.outputHelp()\n    console.log(`  ` + chalk.red(log(...args)))\n    console.log()\n    process.exit(1)\n  }\n}\n\nenhanceErrorMessages('missingArgument', argName =\u003e {\n  return `Missing required argument ${chalk.yellow(`\u003c${argName}\u003e`)}.`\n})\n\nenhanceErrorMessages('unknownOption', optionName =\u003e {\n  return `Unknown option ${chalk.yellow(optionName)}.`\n})\n\nenhanceErrorMessages('optionMissingArgument', (option, flag) =\u003e {\n  return `Missing required argument for option ${chalk.yellow(option.flags)}` + (\n    flag ? `, got ${chalk.yellow(flag)}` : ``\n  )\n})\n\nprogram.parse(process.argv)\n\nif (!process.argv.slice(2).length) {\n  program.outputHelp()\n}\n\n```\n\n\u003c/details\u003e\n\n#### cleanArgs\n\n``` js\n//命令将Command对象本身作为选项传递，\n//仅将实际选项提取到新对象中。\nfunction cleanArgs (cmd) {\n  const args = {}\n  cmd.options.forEach(o =\u003e {\n    const key = o.long.replace(/^--/, '')\n    //如果一个选项不存在并且Command有一个同名的方法\n     //它不应该被复制\n    if (typeof cmd[key] !== 'function') {\n      args[key] = cmd[key]\n    }\n  })\n  return args\n}\n\n```\n\n\n#### loadCommand\n\n`vue-cli/packages/@vue/cli/lib/util/loadCommand.js`\n\n主要就是请求\n\n``` js\n// \nmodule.exports = function loadCommand (commandName, moduleName) {\n  const isNotFoundError = err =\u003e {\n    return err.message.match(/Cannot find module/)\n  }\n  try {\n    return require(moduleName) // 直接请求\n  } catch (err) {\n    if (isNotFoundError(err)) {\n      try {\n        return require('import-global')(moduleName) // 全局请求\n      } catch (err2) {\n        if (isNotFoundError(err2)) {\n          const chalk = require('chalk')\n          const { hasYarn } = require('@vue/cli-shared-utils')\n          const installCommand = hasYarn() ? `yarn global add` : `npm install -g`\n          console.log()\n          console.log(\n            // 叫用户自己 全局下载下载\n            `  Command ${chalk.cyan(`vue ${commandName}`)} requires a global addon to be installed.\\n` +\n            `  Please run ${chalk.cyan(`${installCommand} ${moduleName}`)} and try again.` \n          )\n          console.log()\n          process.exit(1)\n        } else {\n          throw err2\n        }\n      }\n    } else {\n      throw err\n    }\n  }\n}\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fvue-cli-explain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinanf-boy%2Fvue-cli-explain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fvue-cli-explain/lists"}