你好。最近我开始建立一个 Vue3 + TypeScript 的组件库，参考了 ElementPlus 的设计理念。在这篇文章中，我将分享如何从基础开始搭建一个现代化的 Vue3 组件库项目。

这篇文章适合人群：

• Vue3 开发者
• 想了解组件库开发的同学
• 对 monorepo 工程化感兴趣的前端工程师

你将学到：

• 使用 pnpm + monorepo 管理项目
• 配置 TypeScript + Vue3 开发环境
• Vite 建立组件库
• 项目目录结构设计

一、技术选型

在开始之前，先确定我们的技术栈：

二、项目初始化

创建项目目录

mkdir lpieces-uicd lpieces-ui

初始化 git 并准备 monorepo 配置文件

git init
mkdir packages
echo -e 'packages:
"packages/*"'> pnpm-workspace.yaml
pnpm init
# 初始化根 package.json 后继续配置子包结构

创建所有子目录与初始化脚本

cd packages
mkdir components core docs hooks me utils
vim init.shell # 创建一个 init.shell 脚本来批量 init 所有子目录
./init.shell # 执行脚本
# init.shell 内容如下：
for i in components core docs hooks me utils;do cd $i，pnpm init;cd ..，done
# 创建 play 作为组件预览目录
pnpm create vite play --template vue-ts
# 为每个子包修改 package.json name
core/package.json -> name: 'lpieces-ui'
components/package.json -> name: '@lpieces-ui/components'
hooks/package.json -> name: '@lpieces-ui/hooks'
utils/package.json -> name: '@lpieces-ui/utils'
docs/package.json -> name: '@lpieces-ui/docs'
play/package.json -> name: '@lpieces-ui/play'
me/package.json -> name: '@lpieces-ui/me'

痛点提示：在多包项目里经常会因为命名不统一导致 npm install 出错；建议统一使用 `@your-scope/xxx` 命名。

安装根目录依赖

pnpm add -Dw typescript vite vitest vue-tsc postcss-color-mix postcss-each postcss-each-variables postcss-for postcss-nested @types/node @types/lodash-es @vitejs/plugin-vue @vitejs/plugin-vue-jsx @vue/tconfig @popperjs/core async-validator pnpm add -w lodash-es vue
# 修改根 package.json 名称为工作区名称并添加子包依赖引用：
{
"name"这方面，"@lpieces-ui/workspace","dependencies": {
"lodash-es": "^.","vue": "^."。"lpieces-ui": "workspace:*","@lpieces-ui/hooks": "workspace:*","@lpieces-ui/me": "workspace:*","@lpieces-ui/utils": "workspace:*"
}
}
# 安装子包专属 devDependencies：
pnpm add -D @vue/test-utils @vitest/coverage-v8 jsdom --filter @lpieces-ui/components
pnpm add -D @vitepress --filter @lpieces-ui/docs
# 在 core/package.json 添加链接到 components：
{
"devDependencies": {
"@lpieces-ui/components": "workspace:*"
}
}
# 删除 play 中多余 ts 配置文件，以便统一全局 tsconfig。

痛点提示：`--filter` 用法可以显著减少安装时间。但如果忘记加，会导致某些模块缺失。建议在 monorepo 中始终通过 workspace 链接共享依赖。


四、配置 TypeScript 

在根目录创建 `tsconfig.json`：
{
"extends": "@vue/tsconfig/tsconfig.dom.json","compilerOptions": {
"target": "ES2020","useDefineForClassFields": true。"module": "ESNext",... // 剩下配置保持不变
},"include":
}

创建 `postcss.config.cjs`：

module.exports = {
plugins:
}
})
// require
]
}

"tsconfig" 错误往往是因为方法或插件冲突导致编译报错；先用 VSCode 内置错误提示定位即可。

五、withInstall 工具函数 

在 `packages/utils/install.ts` 中实现全局安装工具： 

// import statements...
export function makeInstaller {
const installer = => each)
return installer as Plugin
}
export function withInstall {
.install = => {
const name = .name
app.component
}
return components as SFCWithInstall;}

utils/index.ts 导出统一入口： 

// export * from './install'

"install" 函数常见错误是忘记返回 plugin 或未注册 component 名称；可通过 console.log 检查是否已挂载。

六、第一个组件：Button 

创建 Button.vue： 




导出并包装的观点是。

="" lpbutton="withInstall" p="" packages="" utils'="" withinstall="" {="" }="">

七、core 配置 

主要入口文件 `core/components.ts`: