一、推荐模板项目
-
starter-lib-vue3
- 特点:支持ESM/UMD/CJS多格式打包,提供全局/按需导入功能,集成在线文档和自动生成日志,配置成本极低1。
- 地址:GitHub仓库
-
vue-library-starter
二、核心配置要点
- Vite库模式配置 :需在
vite.config.ts
中设置lib
选项,指定入口文件、输出格式及外部依赖(如Vue)3。 - TypeScript支持 :通过
vue-tsc
进行类型检查,确保组件类型定义完备3。 - CSS方案:推荐UnoCSS或Tailwind CSS实现原子化样式,或使用Scoped CSS+CSS变量3。
三、常见问题解决
- 依赖安装失败 :检查Node.js版本(需≥12.0.0),清理缓存后重试
npm install
4。 - 端口冲突 :默认3000端口被占用时,需终止进程或修改
vite.config.ts
中的server.port
4。 - Vue2兼容 :需安装
vite-plugin-vue2
并指定Vue版本,确保vue
与vue-template-compiler
版本一致5。
四、开发规范
- 组件结构 :每个组件需独立目录,包含
.vue
文件及index.ts
导出文件,并通过withInstall
方法实现全局注册。 - 文档站点:推荐使用Vitepress生成组件文档,支持实时预览和代码片段展示3。
以上模板和方案可快速搭建标准化Vue组件库,兼顾开发效率与工程化规范。