Vue CLI 快速上手指南：安装、创建项目与 vue create / vue ui 全解析

Vue CLI 快速上手指南安装、创建项目与 vue create / vue ui 全解析【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-cliVue CLI 是 Vue.js 官方提供的基于 webpack 的标准工程化工具链通过vue/cli一个全局命令即可完成项目的创建、插件安装、构建与可视化配置。本文以官方文档 docs/index.md 的 Getting Started 为主线结合本仓库packages/vue/cli的源码实现完整讲解 Vue CLI 的安装方式、vue create交互式创建流程、vue ui图形化界面以及所有核心 CLI 命令与配置选项的实际行为。现状提示Vue CLI 已进入维护模式在开始之前需要先了解 Vue CLI 当前的生命周期状态。官方文档在首页明确声明Vue CLI is in Maintenance Mode!For new projects, please usecreate-vueto scaffold Vite-based projects. Also refer to the Vue 3 Tooling Guide for the latest recommendations.也就是说Vue CLI 已经进入维护模式Maintenance Mode官方不再为其添加新功能仅进行必要的维护。对于全新项目官方推荐改用create-vue脚手架基于 Vite但对于存量 Vue 2 / Vue 3 项目、已有 Vue CLI 工程或需要 webpack 生态兼容性的场景Vue CLI 依然是稳定可用的方案本仓库中vue/cli版本为 5.0.9见 packages/vue/cli/package.json。本文所讲解的安装与创建流程在当前仓库源码中均有对应实现可放心按步骤实践。安装 Vue CLI官方文档给出的安装方式有两种任选其一# 使用 npm 全局安装 npm install -g vue/cli # 或者使用 yarn 全局安装 yarn global add vue/cli安装完成后全局会多出一个vue可执行命令。该命令的入口定义在 packages/vue/cli/package.json 的bin字段vue: bin/vue.js实际入口脚本为 packages/vue/cli/bin/vue.js。关于运行环境注意以下两个由源码确认的前提条件Node.js 版本要求vue/cli的engines.node声明为^12.0.0 || 14.0.0。入口脚本 bin/vue.js 在加载任何其他模块之前会先调用checkNodeVersion校验当前 Node 版本不满足时会直接打印红色错误提示并退出进程。校验项目名合法性vue create创建项目时lib/create.js 会使用validate-npm-package-name校验项目名非法名称如包含大写字母或特殊符号会列出具体错误并终止。安装完成后可先运行vue --version或vue --help验证安装结果并查看所有可用命令。创建第一个项目vue create安装完成后使用以下命令创建项目vue create my-project命令执行后CLI 会进入交互式提问阶段主要流程如下对应 lib/Creator.js 中Creator.create()的实现选择预设preset默认提供两个内置预设——Default (Vue 3)与Default (Vue 2)二者均包含基础的 Babel ESLint 配置也可以选择 Manually select features 手动挑选功能。手动选择功能可勾选 Router、Vuex、CSS 预处理器、Linter、单元测试、E2E 测试等特性对应 lib/promptModules 目录下各功能模块的提示实现。选择包管理器与镜像可指定 yarn / npm / pnpm并可选 Taobao npm 镜像以加速依赖安装。保存预设手动模式下可将本次选择保存为自定义预设供后续复用。完成生成CLI 自动完成 git 初始化、依赖安装、调用各插件的 generator 生成模板文件、补充依赖安装、执行完成钩子、生成 README 并提交初始 commit。一个值得注意的细节源码中预设解析优先级为--preset--default--inlinePreset 交互式提问见 Creator.js 的create()方法并且无论选择哪种方式vue/cli-service都会被自动注入到 preset 的plugins中作为项目的核心服务依赖。vue create 完整选项官方文档 docs/guide/creating-a-project.md 列出了vue create的全部选项可直接通过vue create --help查看现完整整理如下选项说明-p, --preset presetName跳过提问使用已保存的或远程的 preset-d, --default跳过提问使用默认预设Vue 3-i, --inlinePreset json跳过提问使用内联 JSON 字符串作为 preset-m, --packageManager command安装依赖时指定 npm 客户端yarn / npm / pnpm-r, --registry url安装依赖时指定 npm registry仅对 npm 生效-g, --git [message\|false]强制进行 git 初始化可指定初始 commit 信息传false则跳过-n, --no-git跳过 git 初始化-f, --force目标目录已存在时强制覆盖--merge目标目录已存在时合并写入-c, --clone拉取远程 preset 时使用 git clone-x, --proxy proxyUrl创建项目时使用指定代理-b, --bare生成不含入门说明的项目骨架--skipGetStarted不显示 Get started 使用提示-h, --help输出用法信息其中-p/--preset的取值逻辑在 Creator.js 的resolvePreset()中体现优先匹配~/.vuerc中保存的 preset 名称default映射到内置的Default (Vue 3)以.json结尾、以.开头或为绝对路径时按本地文件加载包含/时则视为远程 preset 地址并拉取。使用图形化界面vue ui除了命令行Vue CLI 还提供了完整的图形化管理界面。执行vue ui命令会自动启动一个本地服务并打开浏览器通过 GUI 完成项目的创建、依赖管理、插件安装、配置修改与任务执行serve / build / inspect 等。其实现位于 packages/vue/cli/lib/ui.js底层由vue/cli-ui提供 Apollo GraphQL 服务端与前端界面。vue ui同样支持若干选项见 bin/vue.js选项说明-H, --host hostUI 服务监听的主机名默认localhost-p, --port portUI 服务端口不指定时自动寻找可用端口-D, --dev以开发模式运行--quiet不输出启动信息--headless启动时不打开浏览器仅在控制台输出端口号GUI 界面内的创建流程与命令行共用同一套Creator逻辑因此命令行中关于 preset、功能选择的规则在 GUI 中同样适用。常见问题与注意事项Windows Git BashminTTY交互式提示失效官方文档 docs/guide/creating-a-project.md 明确提示在 Windows 的 Git Bash 下交互式提示无法正常工作需要使用winpty vue.cmd create hello-world启动或为vue添加 aliasalias vuewinpty vue.cmd需重启终端会话生效。目标目录已存在不指定-f/--force或--merge时CLI 会以交互方式询问 Overwrite覆盖、Merge合并或 Cancel取消相关分支实现在 lib/create.js 中。使用旧版 Vue CLI 2 的vue initVue CLI 3 与 2.x 共用同一个vue二进制因此会覆盖旧版vue-cli。若仍需vue init拉取 2.x 模板可安装全局桥接包npm install -g vue/cli-init之后vue init webpack my-project的行为与vue-cli2.x一致对应 bin/vue.js 中标记为 legacy API 的init命令。深入preferences 与 .vuerc 配置创建过程中保存的预设、选择的包管理器、是否使用 Taobao 镜像等信息都会被写入用户主目录下的~/.vuercJSON 文件路径由 lib/util/rcPath.js 的getRcPath(.vuerc)计算得出。官方文档建议直接编辑该文件来增删预设与选项。从 lib/options.js 的源码可以看到~/.vuerc支持的顶层字段latestVersion/lastCheckedCLI 版本检查相关packageManager取值为yarn/npm/pnpmuseTaobaoRegistry布尔值是否使用淘宝镜像presets自定义预设集合每个预设需符合 preset schema。预设 schema 关键字段如下plugins为必填对象字段取值 / 说明vueVersion2或3指定 Vue 大版本useConfigFiles布尔值是否将配置提取为独立文件cssPreprocessorsass/dart-sass/less/stylusplugins必填对象键为插件包名值为插件选项configs可选插件相关配置文件内容router/routerHistoryMode/vuex已废弃deprecated改用vue/cli-plugin-router/vue/cli-plugin-vuex插件当~/.vuerc损坏或语法错误时options.js 会给出明确报错提示指导用户修复或删除该文件后重新以手动模式运行。项目创建完成后常用命令速览项目创建完成后官方文档推荐的下一步是运行npm run serve启动开发服务器。除此之外本仓库 bin/vue.js 注册了完整的命令集合可在项目内或全局使用命令作用vue create app-name创建新项目vue add plugin在已有项目中安装插件并调用其 generatorvue invoke plugin仅调用已安装插件的 generatorvue inspect [paths...]查看项目最终 webpack 配置支持--rule、--plugin、--rules、--plugins、-v等选项vue serve当前项目npm run serve的别名vue build当前项目npm run build的别名vue ui启动图形化界面vue init template app-name从远程模板生成项目legacy API需要vue/cli-initvue config [value]查看 / 修改~/.vuerc配置支持-g/--get、-s/--set、-d/--delete、-e/--edit、--jsonvue outdated实验性检查过期的 cli service / 插件vue upgrade [plugin-name]实验性升级 cli service / 插件支持--all、--next、-t/--to、-f/--fromvue migrate [plugin-name]实验性对已安装插件执行 migrator需-f/--from version指定基准版本vue info输出环境调试信息OS、CPU、Node、yarn、npm、浏览器及 Vue 相关包版本对于未知命令bin/vue.js 会基于 Levenshtein 距离leven给出 Did you mean ... 的拼写建议常见错误信息如缺失参数、未知选项也会被enhanceErrorMessages增强为更友好的提示。总结Vue CLIvue/cli5.x虽然已进入维护模式但其一条全局命令 预设系统 插件化 generator 图形化 UI的工程化思路依然稳定可用npm install -g vue/cli完成安装vue create以交互或非交互方式生成工程vue ui提供可视化能力~/.vuerc统一持久化用户偏好vue add / inspect / build / serve等命令覆盖日常开发全流程。对于新项目建议按官方指引转向基于 Vite 的create-vue而对于既有 Vue CLI 工程本文涉及的安装、创建与配置知识仍可直接应用于日常开发与维护。延伸阅读官方入门文档docs/guide/creating-a-project.mdCLI 全部命令注册与参数定义packages/vue/cli/bin/vue.js创建项目核心流程实现packages/vue/cli/lib/Creator.js预设与~/.vuerc校验逻辑packages/vue/cli/lib/options.jsvue ui服务端启动逻辑packages/vue/cli/lib/ui.jsCLI 包声明与版本信息packages/vue/cli/package.json【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考