Element Plus 本地开发指南从环境搭建到组件开发的完整工作流【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus本文以仓库 docs/en-US/guide/dev-guide.md 为核心骨架结合仓库内的脚本与配置源码如 scripts/gc.sh、scripts/sync-locale.ts、play/vite.config.mts为希望在 Element Plus 仓库中预览组件、开发新组件、维护多语言文案的开发者梳理一条完整的本地开发路径安装依赖 → 启动文档站预览 → 进入 play 沙盒迭代组件 → 脚手架生成组件模板 → 同步国际化文案。Element Plus 是一个基于 Vue.js 3 的 UI 组件库其仓库采用 pnpm workspace 多包结构见 pnpm-workspace.yaml将组件、主题、国际化、工具函数等拆分为独立子包。要在这样的仓库中高效地开发与验证组件理解官方提供的本地开发命令及其背后的实现机制至关重要。读完本文你将掌握如何一键启动可热更新的组件开发沙盒、如何在文档站中预览全部已有组件、如何用一条命令生成符合仓库规范的组件模板以及如何保持 60 多种语言的文案与英文源同步。环境准备与依赖安装Bootstrap project官方文档给出的第一个命令是pnpm i该命令会安装整个仓库的全部依赖。有几个细节值得注意包管理器版本仓库根目录 package.json 中声明了packageManager: pnpm11.24.0建议使用匹配的 pnpm 版本Corepack 会自动据此校验。Node.js 版本同一文件中的engines字段要求node 22.13.0低于该版本可能无法正常运行构建与开发脚本。workspace 结构workspaces包含packages/*、play、docs三个范围因此pnpm i会以 workspace 协议如element-plus/components: workspace:*链接各内部包保证本地源码改动即时生效。postinstall 钩子安装完成后会自动执行pnpm stub pnpm gen:version pnpm run -C internal/metadata dev 即生成各包的 d.ts 桩文件、版本文件与元数据这一步为后续开发环境就绪提供了基础。文档站预览一条命令查看所有组件执行pnpm docs:dev根目录脚本定义为docs:dev: pnpm run -C docs dev见 package.json即在docs子包中启动 VitePress 开发服务器打开后即可在浏览器中预览全部已有组件的文档站包括组件 API 表格、属性说明与示例代码。这适合两种场景查看某个组件的完整文档与交互效果确认现有能力验证自己修改的组件是否影响了文档示例的渲染。若需要为文档站做静态构建可进一步使用pnpm docs:build构建产物默认输出到docs/.vitepress/dist。组件开发沙盒pnpm dev 编辑play/src/App.vue文档明确指出本地开发的核心命令是pnpm dev它实际执行的是dev: pnpm -C play dev根 package.json最终落到 play/package.json 中的dev: vite即启动一个面向组件开发的 Vite 开发服务器。结合 play/vite.config.mts 可以看出该沙盒的几个关键设计端口与访问server.port: 3000且host: true默认监听http://localhost:3000并允许局域网访问若设置环境变量HTTPS还会通过vite-plugin-mkcert自动生成证书以 HTTPS 方式启动。源码直连通过 alias 将element-plus直接映射到packages/element-plus/index.ts源码入口因此你在packages/components下的任何改动都会触发 HMR无需先构建产物。按需自动导入配置了unplugin-vue-components的ElementPlusResolverimportStyle: sass沙盒中的组件标签会被自动解析并注入 Sass 样式开发体验接近生产用法。调试辅助内置vite-plugin-inspect可在浏览器中审查模块依赖与转换结果排查源码问题非常实用。启动后把你要开发的组件挂载到入口组件中。文档给出的模板如下template ComponentYouAreDeveloping / /template script setup langts // make sure this component is registered in element-plus/components /script需要说明的是这份模板是示意性的。实际仓库中该沙盒入口为play/src/App.vue注意文档写作时指向play/src/App.vue而仓库当前以 play/app.example.vue 作为参考示例并且 play/main.ts 会根据 URL 路径动态加载./src/*.vue访问http://localhost:3000/App即渲染play/src/App.vue。因此最直接的做法是创建/修改play/src/App.vue在其中放置正在开发的新组件并像示例那样自行组合已有的el-button、el-icon、v-loading等验证新组件与既有组件的交互。App.vue 中的改动同样由 Vite HMR 即时刷新。组件脚手架pnpm gen component-name当需要从零开发一个新组件时不必手工搭建目录结构直接运行pnpm gen component-name # eg. pnpm gen awesome pnpm gen awesome-button根目录脚本定义为gen: bash ./scripts/gc.sh其真实实现位于 scripts/gc.sh。了解这份脚本有助于你理解生成物与命名约束命名与约束组件名支持awesome或awesome-button这类 kebab-case 写法脚本会将其转换为 PascalCaseAwesomeButton、首字母小写的属性前缀awesomeButton以及组件库统一前缀ElElAwesomeButton。参数中不能包含空格且目标目录packages/components/name已存在时会报错退出避免误覆盖已有组件。生成的文件清单全部位于packages/components/name/下文件作用src/name.vue组件 SFC 骨架含slot /、defineOptions({ name: ElXxx })、props/emits 的接入占位src/name.ts基于buildProps的 Props 定义与类型导出含XxxPropsPublic公共类型src/instance.ts组件实例类型XxxInstance的导出index.ts通过withInstall生成可全局注册的ElXxx并导出全部类型__tests__/name.test.tsx基于 Vitest vue/test-utils 的最小渲染测试用例style/index.ts、style/css.ts按需样式入口分别引入 Sass 源码与编译后的 CSSpackages/theme-chalk/src/name.scss空的主题样式文件供后续编写样式此外脚本还会自动把新组件注册进组件总入口 packages/components/index.ts追加export * from ./name并更新 typings/global.d.ts 中的全局组件类型声明使ElXxx在模板与 TS 类型中开箱可用。生成骨架后推荐的工作流是在src/name.vue中编写实现 → 在src/name.ts中补充 props/emits → 在play/src/App.vue中引入预览 → 用pnpm dev即时验证 → 补充__tests__用例后用pnpm test跑测试。国际化同步pnpm locale:syncElement Plus 的语言文件位于 packages/locale/lang共 67 个语言文件其中 en.ts 是英文源。当组件新增了需要翻译的文案时运行pnpm locale:sync即可将en.ts中的新字段同步到其他语言文件并为尚未翻译的字段追加注释// to be translated。根目录脚本定义为locale:sync: tsx scripts/sync-locale.ts pnpm run locale:lint其核心逻辑在 scripts/sync-locale.ts 中值得注意的行为包括以 en.ts 为唯一事实源脚本解析en.ts的el对象与每个语言文件的el对象递归合并只新增缺失字段不覆盖已有的翻译内容增量标注新增字段与数组项会保留英文占位并追加// to be translated注释如Yes // to be translated翻译者只需检索该注释即可定位待译内容超集告警若目标语言文件存在en.ts中没有的多余字段脚本会输出Found extra field in target警告帮助清理过期文案自动 lint同步完成后会执行locale:lint对packages/locale/lang运行 eslint 并自动修复保证生成文件的代码风格统一。日常流程即为在en.ts中新增文案 → 运行pnpm locale:sync→ 到各语言文件中定位// to be translated并填入翻译。开发期其他常用命令围绕上述主流程仓库还提供了若干配套命令全部可在根 package.json 中查到命令用途pnpm test基于 Vitest 运行全部单元测试含各组件__tests__目录pnpm test:coverage生成测试覆盖率报告pnpm test:ssr运行 SSR 场景测试配置见 ssr-testing/vitest.config.tspnpm lint对源码与文档执行 eslint 检查--max-warnings 0保证零告警通过pnpm typecheck依次执行 web / play / node / vite-config / vitest 五套 TS 类型检查pnpm build构建组件库正式产物pnpm docs:build构建文档站静态站点结语Element Plus 的本地开发体验可以归纳为三条命令贯穿始终pnpm dev用于组件迭代pnpm gen用于规范地创建新组件pnpm locale:sync用于维护国际化文案而pnpm docs:dev则是观察全量组件文档的最快途径。如果你计划向该仓库提交代码更完整的工作流分支规范、提交信息格式、测试要求等请参阅仓库根目录的 CONTRIBUTING.md撰写提交信息时仓库还配置了 commitlint见 commitlint.config.mjs与pnpm czcz-git交互式提交工具可帮助你生成符合 Conventional Commits 规范的提交。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Element Plus 本地开发指南：从环境搭建到组件开发的完整工作流
Element Plus 本地开发指南从环境搭建到组件开发的完整工作流【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus本文以仓库 docs/en-US/guide/dev-guide.md 为核心骨架结合仓库内的脚本与配置源码如 scripts/gc.sh、scripts/sync-locale.ts、play/vite.config.mts为希望在 Element Plus 仓库中预览组件、开发新组件、维护多语言文案的开发者梳理一条完整的本地开发路径安装依赖 → 启动文档站预览 → 进入 play 沙盒迭代组件 → 脚手架生成组件模板 → 同步国际化文案。Element Plus 是一个基于 Vue.js 3 的 UI 组件库其仓库采用 pnpm workspace 多包结构见 pnpm-workspace.yaml将组件、主题、国际化、工具函数等拆分为独立子包。要在这样的仓库中高效地开发与验证组件理解官方提供的本地开发命令及其背后的实现机制至关重要。读完本文你将掌握如何一键启动可热更新的组件开发沙盒、如何在文档站中预览全部已有组件、如何用一条命令生成符合仓库规范的组件模板以及如何保持 60 多种语言的文案与英文源同步。环境准备与依赖安装Bootstrap project官方文档给出的第一个命令是pnpm i该命令会安装整个仓库的全部依赖。有几个细节值得注意包管理器版本仓库根目录 package.json 中声明了packageManager: pnpm11.24.0建议使用匹配的 pnpm 版本Corepack 会自动据此校验。Node.js 版本同一文件中的engines字段要求node 22.13.0低于该版本可能无法正常运行构建与开发脚本。workspace 结构workspaces包含packages/*、play、docs三个范围因此pnpm i会以 workspace 协议如element-plus/components: workspace:*链接各内部包保证本地源码改动即时生效。postinstall 钩子安装完成后会自动执行pnpm stub pnpm gen:version pnpm run -C internal/metadata dev 即生成各包的 d.ts 桩文件、版本文件与元数据这一步为后续开发环境就绪提供了基础。文档站预览一条命令查看所有组件执行pnpm docs:dev根目录脚本定义为docs:dev: pnpm run -C docs dev见 package.json即在docs子包中启动 VitePress 开发服务器打开后即可在浏览器中预览全部已有组件的文档站包括组件 API 表格、属性说明与示例代码。这适合两种场景查看某个组件的完整文档与交互效果确认现有能力验证自己修改的组件是否影响了文档示例的渲染。若需要为文档站做静态构建可进一步使用pnpm docs:build构建产物默认输出到docs/.vitepress/dist。组件开发沙盒pnpm dev 编辑play/src/App.vue文档明确指出本地开发的核心命令是pnpm dev它实际执行的是dev: pnpm -C play dev根 package.json最终落到 play/package.json 中的dev: vite即启动一个面向组件开发的 Vite 开发服务器。结合 play/vite.config.mts 可以看出该沙盒的几个关键设计端口与访问server.port: 3000且host: true默认监听http://localhost:3000并允许局域网访问若设置环境变量HTTPS还会通过vite-plugin-mkcert自动生成证书以 HTTPS 方式启动。源码直连通过 alias 将element-plus直接映射到packages/element-plus/index.ts源码入口因此你在packages/components下的任何改动都会触发 HMR无需先构建产物。按需自动导入配置了unplugin-vue-components的ElementPlusResolverimportStyle: sass沙盒中的组件标签会被自动解析并注入 Sass 样式开发体验接近生产用法。调试辅助内置vite-plugin-inspect可在浏览器中审查模块依赖与转换结果排查源码问题非常实用。启动后把你要开发的组件挂载到入口组件中。文档给出的模板如下template ComponentYouAreDeveloping / /template script setup langts // make sure this component is registered in element-plus/components /script需要说明的是这份模板是示意性的。实际仓库中该沙盒入口为play/src/App.vue注意文档写作时指向play/src/App.vue而仓库当前以 play/app.example.vue 作为参考示例并且 play/main.ts 会根据 URL 路径动态加载./src/*.vue访问http://localhost:3000/App即渲染play/src/App.vue。因此最直接的做法是创建/修改play/src/App.vue在其中放置正在开发的新组件并像示例那样自行组合已有的el-button、el-icon、v-loading等验证新组件与既有组件的交互。App.vue 中的改动同样由 Vite HMR 即时刷新。组件脚手架pnpm gen component-name当需要从零开发一个新组件时不必手工搭建目录结构直接运行pnpm gen component-name # eg. pnpm gen awesome pnpm gen awesome-button根目录脚本定义为gen: bash ./scripts/gc.sh其真实实现位于 scripts/gc.sh。了解这份脚本有助于你理解生成物与命名约束命名与约束组件名支持awesome或awesome-button这类 kebab-case 写法脚本会将其转换为 PascalCaseAwesomeButton、首字母小写的属性前缀awesomeButton以及组件库统一前缀ElElAwesomeButton。参数中不能包含空格且目标目录packages/components/name已存在时会报错退出避免误覆盖已有组件。生成的文件清单全部位于packages/components/name/下文件作用src/name.vue组件 SFC 骨架含slot /、defineOptions({ name: ElXxx })、props/emits 的接入占位src/name.ts基于buildProps的 Props 定义与类型导出含XxxPropsPublic公共类型src/instance.ts组件实例类型XxxInstance的导出index.ts通过withInstall生成可全局注册的ElXxx并导出全部类型__tests__/name.test.tsx基于 Vitest vue/test-utils 的最小渲染测试用例style/index.ts、style/css.ts按需样式入口分别引入 Sass 源码与编译后的 CSSpackages/theme-chalk/src/name.scss空的主题样式文件供后续编写样式此外脚本还会自动把新组件注册进组件总入口 packages/components/index.ts追加export * from ./name并更新 typings/global.d.ts 中的全局组件类型声明使ElXxx在模板与 TS 类型中开箱可用。生成骨架后推荐的工作流是在src/name.vue中编写实现 → 在src/name.ts中补充 props/emits → 在play/src/App.vue中引入预览 → 用pnpm dev即时验证 → 补充__tests__用例后用pnpm test跑测试。国际化同步pnpm locale:syncElement Plus 的语言文件位于 packages/locale/lang共 67 个语言文件其中 en.ts 是英文源。当组件新增了需要翻译的文案时运行pnpm locale:sync即可将en.ts中的新字段同步到其他语言文件并为尚未翻译的字段追加注释// to be translated。根目录脚本定义为locale:sync: tsx scripts/sync-locale.ts pnpm run locale:lint其核心逻辑在 scripts/sync-locale.ts 中值得注意的行为包括以 en.ts 为唯一事实源脚本解析en.ts的el对象与每个语言文件的el对象递归合并只新增缺失字段不覆盖已有的翻译内容增量标注新增字段与数组项会保留英文占位并追加// to be translated注释如Yes // to be translated翻译者只需检索该注释即可定位待译内容超集告警若目标语言文件存在en.ts中没有的多余字段脚本会输出Found extra field in target警告帮助清理过期文案自动 lint同步完成后会执行locale:lint对packages/locale/lang运行 eslint 并自动修复保证生成文件的代码风格统一。日常流程即为在en.ts中新增文案 → 运行pnpm locale:sync→ 到各语言文件中定位// to be translated并填入翻译。开发期其他常用命令围绕上述主流程仓库还提供了若干配套命令全部可在根 package.json 中查到命令用途pnpm test基于 Vitest 运行全部单元测试含各组件__tests__目录pnpm test:coverage生成测试覆盖率报告pnpm test:ssr运行 SSR 场景测试配置见 ssr-testing/vitest.config.tspnpm lint对源码与文档执行 eslint 检查--max-warnings 0保证零告警通过pnpm typecheck依次执行 web / play / node / vite-config / vitest 五套 TS 类型检查pnpm build构建组件库正式产物pnpm docs:build构建文档站静态站点结语Element Plus 的本地开发体验可以归纳为三条命令贯穿始终pnpm dev用于组件迭代pnpm gen用于规范地创建新组件pnpm locale:sync用于维护国际化文案而pnpm docs:dev则是观察全量组件文档的最快途径。如果你计划向该仓库提交代码更完整的工作流分支规范、提交信息格式、测试要求等请参阅仓库根目录的 CONTRIBUTING.md撰写提交信息时仓库还配置了 commitlint见 commitlint.config.mjs与pnpm czcz-git交互式提交工具可帮助你生成符合 Conventional Commits 规范的提交。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考