<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title>Nx - Tag - 帅说帅话</title><link>https://xiaoshuai1024.github.io/tags/nx/</link><description>Nx - Tag - 帅说帅话</description><generator>Hugo -- gohugo.io</generator><language>en</language><lastBuildDate>Tue, 17 Mar 2026 10:00:00 +0800</lastBuildDate><atom:link href="https://xiaoshuai1024.github.io/tags/nx/" rel="self" type="application/rss+xml"/><item><title>复杂前端组件库项目架构</title><link>https://xiaoshuai1024.github.io/posts/component-library-architecture/</link><pubDate>Tue, 17 Mar 2026 10:00:00 +0800</pubDate><author>Author</author><guid>https://xiaoshuai1024.github.io/posts/component-library-architecture/</guid><description><![CDATA[本文以 luban-ui 为例，介绍一套适合复杂前端组件库的项目架构，重点包括代码组织、工程化与便捷脚本，并详细说明技术栈选型与使用方式。适用于需要多包协作、严格类型与测试、且要对外发布 npm 的 Vue 3 组件库场景。
1. 概述与目标 定位：底层组件库（基础组件 + 低代码组件 + 设计器 + 运行时渲染），不包含业务应用。 目标：多包 Monorepo、统一构建/测试/发布、类型声明完整、单元测试与 E2E 覆盖、文档与 Demo 分离。 约束：组件风格遵循 Material Design，响应式设计；新增/修改组件必须补齐单元测试与 E2E，并通过根目录脚本可执行。 2. 技术栈详解 2.1 核心运行时与框架 技术 版本（参考） 用途 Vue ^3.5.x 组件开发、Composition API、&lt;script setup&gt; TypeScript ~5.9.x 类型安全、.d.ts 声明、严格模式 Vite ^6.x 开发服务器、库模式构建、测试运行器底座 Vue 3：单文件组件（.vue）用 template 编写，不使用 h() 为主实现；模板中组件调用统一 kebab-case（如 &lt;luban-form&gt;）。 TypeScript：tsconfig.base.json 统一 strict: true、module: &quot;esnext&quot;、moduleResolution: &quot;bundler&quot;；各包通过 tsconfig.lib.json 做声明产出（emitDeclarationOnly）。 Vite：每个 package 独立 vite.config.mts，库模式 build.lib.entry 指向 src/index.ts，rollupOptions.external 排除 vue、luban-base 等，由使用方或 workspace 提供。 2.]]></description></item></channel></rss>