Vue CLI 快速原型开发指南用vue serve与vue build零配置开发单文件组件【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli本文以 docs/ru/guide/prototyping.md俄文版《Мгновенное прототипирование》为核心骨架结合当前仓库的官方英文/中文文档与迁移指南展开。快速原型开发Instant Prototyping是 Vue CLI 提供的一项面向单个*.vue/*.js文件的零配置开发与构建能力无需初始化完整工程即可用vue serve起一个开发服务器、用vue build产出生产包。阅读本文后你将掌握该功能的安装方式、两条命令的全部参数与使用场景、入口文件推导规则以及它在当前仓库版本v5见 packages/vue/cli/package.json中的演进与替代方案。快速原型开发的定位与适用场景Vue CLI 的主要工作流是vue create初始化一个完整工程再由vue-cli-service serve/vue-cli-service build驱动开发与构建。但在很多场景下你只是想让一个单文件组件SFC立刻跑起来验证一个组件的渲染结果不想新建目录、写package.json、装一堆依赖快速搭一个 Demo 页面分享给同事把单个.vue文件打成一个库或 Web Component 直接发布。为此Vue CLI 提供了快速原型开发Instant Prototyping能力核心是两条命令vue serve—— 在开发模式下零配置为.js或.vue文件启动一个服务器vue build—— 在生产模式下零配置构建一个.js或.vue文件。原文档特别强调了一个重要局限vue serve依赖全局安装的依赖包不同机器上的全局依赖版本可能不一致无法保证跨环境结果完全相同。因此该功能只建议用于快速原型开发正式的工程化项目仍应走vue create的完整流程。这一论断在中文版 docs/zh/guide/prototyping.md 中同样被明确写出。安装额外全局安装vue/cli-service-globalvue serve/vue build并不是vue/cli自带的命令而是由扩展包vue/cli-service-global提供的。使用前需与vue/cli一起全局安装npm install -g vue/cli vue/cli-service-global # 或者使用 yarn yarn global add vue/cli vue/cli-service-global安装完成后即可在任何目录下直接使用vue serve/vue build命令。从当前仓库的变更记录CHANGELOG.md可以看到vue/cli-service-global在此前的版本中一直是与vue/cli、vue/cli-service同步维护、迭代的独立包例如它曾包含从vue/cli-service-global加载 vue 用于vue serve/vue build修复 no-debugger 规则配置等修复记录这印证了原型开发命令背后是一套独立的运行时实现而不是简单复用全局vue/cli的既有命令。vue serve零配置启动开发服务器完整命令帮助原文档给出了vue serve的完整用法说明俄文版包含端口选项信息最全用法: serve [options] [entry] 零配置为 .js 或 .vue 文件启动开发服务器 选项: -o, --open 在浏览器中打开 -c, --copy 将本地 URL 复制到剪贴板 -p, --port port 服务器使用的端口默认值: 8080 或下一个可用端口 -h, --help 输出用法信息要点解读-p, --port指定端口默认是8080若 8080 被占用则自动顺延到下一个空闲端口与vue/cli-service的serve命令行为一致底层都基于端口探测机制实现-o, --open启动后自动在浏览器打开页面适合原型演示-c, --copy把本地访问 URL 复制到剪贴板方便发给他人预览。最简使用一个App.vue即可你唯一需要准备的就是一个App.vue文件template h1Hello!/h1 /template然后在App.vue所在目录执行vue serve即可在开发服务器中看到页面无需任何 webpack、Babel 等配置。入口文件的自动推导规则vue serve使用了与vue create创建的项目完全相同的默认配置webpack、Babel、PostCSS 与 ESLint。执行时它会自动在当前目录推导入口文件候选顺序为以下四个文件名之一main.jsindex.jsApp.vueapp.vue也就是说你只需保证当前目录存在以上任意一个文件vue serve就能直接启动。显式指定入口文件你也可以显式指定入口直接针对某个组件文件启动开发服务器vue serve MyComponent.vue这在你想单独预览src/components/下某个组件时尤其方便。渐进式扩展从零配置到本地依赖vue serve并非只能裸跑它允许你在保持零脚手架的前提下渐进式引入工程化能力提供自定义的index.html覆盖默认的 HTML 模板提供package.json声明并安装本地依赖后正常import使用通过 Babel、PostCSS、ESLint 各自的配置文件如babel.config.js、postcss.config.js、.eslintrc.*按需定制转译、样式处理与代码规范。这样原型项目可以在需要时平滑地向完整工程靠拢而不必一开始就搭建整套工具链。vue build零配置生产构建完整命令帮助原文档给出了vue build的完整用法说明用法: build [options] [entry] 零配置生产构建一个 .js 或 .vue 文件 选项: -t, --target target 构建目标 (app | lib | wc | wc-async, 默认值: app) -n, --name name 库或 Web Components 组件的名称 (默认值: 入口文件名) -d, --dest dir 输出目录 (默认值: dist) -h, --help 输出用法信息最简使用构建可部署的生产包当你完成了组件的原型验证可以将其构建为生产环境可部署的产物vue build MyComponent.vue默认情况下vue build的输出目录是dist可通过-d修改构建目标默认是app即产出完整的单页应用资源。三种进阶构建目标lib / wc / wc-asyncvue build的价值不仅限于产出应用还支持把组件构建成**库library**或Web Components自定义元素分别对应-t的取值app默认构建为单页应用lib构建为可被其他项目import的组件库wc构建为注册到全局的 Web Components自定义元素wc-async构建为异步加载的 Web Components组件按需异步拉取。使用示例# 构建为组件库指定库名称 vue build MyComponent.vue -t lib -n my-component # 构建为 Web Components输出到指定目录 vue build MyComponent.vue -t wc -d dist/wc其中-n, --name在构建lib或wc目标时用于指定库名 / 组件名默认取入口文件名。原文档此处指向了构建目标build-targets的详细章节需要说明的是该细化章节在当前仓库的 v5 文档中已随原型功能的整体移除而不再收录英文版 docs/guide/prototyping.md 与中文版 docs/zh/guide/prototyping.md 均只保留了命令级说明若需了解lib/wc/wc-async的完整参数矩阵可参考 v4 时代的对应文档。版本演进v5 中原型功能已被移除在撰写或引用本主题时必须注意版本前提。当前仓库是 Vue CLIv5vue/cli版本为5.0.9见 packages/vue/cli/package.json而英文版 docs/guide/prototyping.md 的正文第一句即是Removed in v5. We recommend you to use vite for Vue component prototyping.这明确了该功能在 v5 中被移除官方给出的替代方案是使用 Vite 进行 Vue 组件原型开发本文按规范不展开外部链接仅作名称提示。v4 及更早版本的用户仍可参考当时版本的文档使用本指南描述的全部能力。迁移文档 docs/migrations/migrate-from-v4.mdThevueCommand一节对这次变更有更精确的描述The instant prototyping functionalities are removed. Now thevue serve/vue buildcommands are aliases tonpm run serve/npm run build, which in turn execute the scripts specified in the projectpackage.json.也就是说从 v5 起vue serve/vue build这两个命令名虽然还在但语义已完全不同——它们变成npm run serve/npm run build的别名执行的是当前项目package.json中声明的脚本而不再具备零配置直接跑一个.vue文件的能力若确需零配置开发独立.vue组件官方建议使用 SFC 在线沙箱如sfc.vuejs.org或 Vite 脚手架等工具。此外docs/migrations/migrate-from-v3.md 末尾的vue/cli-service-global小节还提醒在 v3 → v4 的迁移过程中vue/cli-service-global的破坏性变更与vue/cli-service、vue/cli-plugin-eslint两个包保持一致因为它内部复用了vue/cli-service的配置体系与 ESLint 插件能力。这一细节也从侧面印证了本文第 2 节的结论——原型命令并非孤立实现而是建立在vue/cli-service成熟配置栈之上的薄封装。小结与最佳实践场景推荐工具说明快速验证单个.vue文件v4 及以前vue serve零配置、自动推导入口、支持端口/打开浏览器/复制 URL快速产出生产包v4 及以前vue build支持app/lib/wc/wc-async四种目标多组件/多人协作的正式项目vue createvue-cli-service依赖按项目隔离跨机器可复现v5 时代的单组件原型Vite / SFC 沙箱官方推荐替代方案使用快速原型开发的几条实践建议明确其一次性定位它依赖全局依赖跨机器一致性无法保证原文档原文强调的缺点适合 demo、验证、分享不适合作为长期项目基础善用入口推导把待预览文件命名为main.js、index.js、App.vue或app.vue之一即可免去传参命名规则不匹配时则用vue serve entry显式指定渐进式引入配置从纯App.vue起步需要时再补index.html、package.json、本地依赖以及 Babel / PostCSS / ESLint 配置文件保持原型阶段的最小成本关注版本差异若你当前使用 v5 及以上版本请勿再期待vue serve能零配置运行单文件组件——它已是npm run serve的别名请改用 Vite 等替代工具。如需进一步查看相关命令在工程模式下的实现细节可继续阅读 docs/guide/cli-service.mdvue-cli-service的命令体系与 packages/vue/cli-service/lib/commands/serve.js开发服务器的源码实现。【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考