★ FEATURED ARTICLE Evergreen 安装与配置完整指南5 分钟从零跑通 React UI 组件库【免费下载链接】evergreen Evergreen React UI Framework by Segment项目地址: https://gitcode.com/gh_mirrors/evergreen1/evergreenEvergreen 是 Segment 开发维护的 React UI 组件库内置 Button、Dialog、Table、Menu 等 30 多个开箱即用的组件适合需要快速搭建管理后台和企业级 Web 应用的开发者。本文是一份从零到跑通的 Evergreen 安装与配置指南克隆代码、装好依赖、启动本地预览再逐步完成构建与自测。✅ 快速上手三步启动组件预览先不碰任何配置用最短路径看到效果。第 1 步克隆代码git clone https://gitcode.com/gh_mirrors/evergreen1/evergreen cd evergreen第 2 步安装依赖yarn install仓库带有yarn.lock用 yarn 安装可以保证版本与锁文件完全一致。第 3 步启动 Storybookyarn dev这条脚本实际执行start-storybook -p 6006。终端出现 Storybook 启动提示后浏览器打开http://localhost:6006左侧能看到 Button、Dialog、Table 等组件分组点击任意一项即可看到实时可交互的组件示例。到这里Evergreen 安装就算跑通了。 环境清单开始之前核对版本依赖要求查看命令Node.js 14package.json 中engines声明node: 14node -vYarn1.x 推荐yarn -vGit较新版本即可git --version端口6006Storybook、3000文档站未被占用浏览器直接访问确认如果你打算把 evergreen-ui 装进自己的项目注意它对 React 的 peer 依赖范围是^16.8.0 \|\| ^17.0.0 \|\| ^18.0.0项目里的 React 版本落在该区间内就不会有依赖冲突。️ 详细步骤安装、启动与验证1安装依赖yarn install预期命令以 0 退出码结束生成node_modules/。若报EBADENGINE Unsupported engine先执行node -v确认 Node 是否低于 14。2启动组件开发环境yarn dev预期Storybook 运行在 6006 端口。想换端口可以直接执行yarn start-storybook -p 6007。组件源码按组件拆目录放在 src/修改组件文件后 Storybook 会热更新无需重启。3启动文档站文档站是一个独立的 Next.js 工程位于 docs/依赖需要单独安装cd docs yarn install yarn dev预期http://localhost:3000打开完整文档站包含全部组件文档、色彩与排版等设计规范以及 v6 到 v7 的迁移说明。4生产构建yarn build它会先跑yarn typecheck再并行产出 commonjs、esm、umd、类型声明和 codemods 五份产物。构建通过说明你后续发布或二次打包都没有问题。5自测验证yarn test预期依次通过 eslint 检查、tsd 类型测试和 jest 用例。只想查类型可以单独跑yarn typecheck。⚠️ 常见坑4 个高频问题快速修复端口被占用。yarn dev提示 6006 端口已占用时换一个端口即可yarn start-storybook -p 6007。文档站的 3000 端口同理。Node 版本过低。安装阶段报EBADENGINE或大量依赖构建失败多半是 Node 低于 14。升级到较新的 LTS 版本后重新yarn install即可。自己项目里安装报依赖冲突。执行yarn add evergreen-ui出现 peer dependency 冲突时检查项目 React 版本是否在 16.8 到 18 之间对齐版本即可解决。文档站在很新的 Node 环境报错。docs/package.json 中 Next.js 声明为latest在较新环境可能不兼容。只体验组件的话优先使用根目录的 Storybook路径最短也最稳。 下一步文档、主题与进阶入口完整组件文档与设计规范docs/documentation/v6 到 v7 迁移指南docs/documentation/introduction/migrations/主题定制机制docs/documentation/introduction/theming.mdx主题 token 源码在 src/themes/SSR 示例Next.js extractStylesexamples/ssr-next/自动迁移 codemodscodemods/可批量升级旧版导入路径与组件新建组件执行yarn create-package用模板脚本脚手架化如果只做快速上手跟完「快速上手」一节的三条命令就够了想深入理解组件组合与主题定制再从上面的入口逐个看。【免费下载链接】evergreen Evergreen React UI Framework by Segment项目地址: https://gitcode.com/gh_mirrors/evergreen1/evergreen创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
