本文共 1871 字，大约阅读时间需要 6 分钟。
Vue CLI 是一个基于 Vue.js 开发的快速项目创建工具，提供了终端命令行工具、零配置脚手架、插件体系和图形化管理界面等功能。本文将深入分析 Vue CLI 的项目初始化流程，包括命令行工具的实现、输入错误处理、Node版本检查、路径判断、应用名验证、文件覆盖问题以及错误捕获机制等。
使用 Vue CLI 创建项目非常简单，支持 Vue 2 和 Vue 3 项目的默认配置或自定义配置。以下是基本命令：
npm install -g @vue/clivue create vue-cli-test
通过 vue create 命令，可以快速创建项目。此外，还可以根据需求选择是否使用 Babel、TypeScript等配置。
如果用户在终端输入错误命令，Vue CLI 会提供智能提示。例如，输入 vue creat xxx 而不是 vue create xxx，系统会提示：
Did you mean create
这是通过 leven 算法计算字符串编辑距离实现的，Vue CLI 会根据输入和已注册的命令，推断用户的意图。
Vue CLI 在运行时会检查 Node.js 版本是否符合要求。例如，当前版本为 Node 10.20.1，而 Vue CLI 4.5.9 要求 Node 版本大于 8.9，则会提示：
You are using Node 10.20.1.Node.js 8.x has already reached end-of-life and will not be supported in future major releases.It's strongly recommended to use an active LTS version instead.
在执行 vue create 时，必须指定项目名称。如果用户希望在当前目录下创建项目，可以使用 vue create . 命令。项目初始化时，Vue CLI 会检查目标目录是否存在，并根据选项处理。
Vue CLI 会通过 validate-npm-package-name 包验证项目名称是否符合 npm 包名规范。如果名称无效，会提示错误信息。
如果目标目录已存在，Vue CLI 会询问用户是否覆盖或合并。用户可以选择：
Vue CLI 的 create 方法外层有一个 catch 块，用于捕获内部错误并处理。例如，安装依赖失败时，会停止-spinner 并退出进程。
Vue CLI 的核心逻辑在 Creator 类中实现。通过 promptModules 获取交互模块，注册 PromptModuleAPI，并在构造函数中初始化交互配置。插件体系允许用户扩展功能，例如 Babel、 ESLint 等。
预设允许用户无需每次都手动选择配置。通过 promptAndResolvePreset 方法，Vue CLI 会根据预设生成交互流程。例如，选择 Vue 版本后，会弹出具体选项，如选择 Vue 2.x 或 3.x。
创建项目后，Vue CLI 会生成 package.json，并根据选项安装依赖。例如，Babel 插件会添加相应的 devDependencies。
通过 GeneratorAPI 类，Vue CLI 会根据选项生成代码并写入文件系统。例如，@vue/cli-service 插件会生成 package.json，并配置项目脚本和依赖。
Vue CLI 可以将配置文件（如 Babel、 ESLint）提取到独立文件中，便于管理和维护。
生成代码后，writeFileTree 方法会将内存中的文件写入硬盘。例如，删除已存在的文件并重新生成新文件。
Vue CLI 的项目初始化流程复杂且灵活，核心逻辑包括命令行参数处理、预设管理、插件集成、代码生成等。其设计理念强调灵活性和可扩展性，适合开发者快速创建和定制项目。
转载地址：http://wupkz.baihongyu.com/