vuecomp-starter 组件库开发模板，轻松开发自己的组件库

开源地址: github.com/windlil/vue...

说明文档: windlil.github.io/vuecomp-sta...

介绍

开源的 Vue3 + Typescript 组件库开发模板，简单轻松构建功能完善的组件库，按照约定的目录编排来进行开发，使开发者只需关注组件的开发以及说明文档的编写，无需关注其他繁琐的配置。

采用约定式的开发方法，对许多位置都做了自动化处理，包括文件创建，文档路由等，可以大幅提高开发的效率。

相信许多小伙伴都希望能自己开发出一套组件库，这是很有成就感的一件事，但是大部分人都困在组件库开发的前期构建以及打包阶段，而vuecomp-starter就是为此而生。

特性

约定式开发，大幅减轻开发者工作量
已经完成组件库前期构建和打包阶段，只需要关注到组件的开发
按照约定目录进行开发，打包后的组件库能够支持按需导入，完美配合TreeShaking
集成Vitepress，按照约定位置创建文件会自动配置路由，只需要关注文档内容的编写
对测试环境支持约定式路由写法，无需编写路由文件
配备了完善的自动化创建脚本，减少繁琐的文件创建过程
通过简单的修改环境变量来修改开发方式
支持说明文档自动化部署

安装

bash 复制代码

# install degit
npm  i -g degit

# clone starter
degit windlil/vuecomp-starter [your project name]

# switch to your project directory
cd [your project name]

# install dependence
pnpm i

# open docs
pnpm docs:dev

scripts命令介绍

开发模板配备了许多的脚本，可以帮助大幅提高开发效率，让开发者只需要关注到代码层面。

pnpm build: 对组件库进行打包。
pnpm docs:dev: 开启说明文档服务。
pnpm comp:play: 开启组件测试环境。
pnpm docs:build: 打包说明文档。

自动化脚本：

pnpm comp:create [component name]: 创建组件文件，并自动引入到导出根文件。
pnpm comp:new [component name]: 创建测试环境组件文件。
pnpm docs:new [component name]: 创建新的组件说明文档。
pnpm component:create [component name]: pnpm comp:create、pnpm comp:new、pnpm docs:new合并命令，推荐使用。

env配置介绍

⚠在初次开发的时候需要对根目录的.env文件进行配置修改

ini 复制代码

# CSS预处理器 默认支持sass和less
CSS_PREPROCESSOR = 'scss'
# 用于添加组件命名前缀，建议采用首字母大写格式，最后生成的组件会采取类似这种格式:<vc-button></vc-button>
COMPONENT_NAME = 'Vc'

组件开发约定

组件开发建议采用以下目录结构：

less 复制代码

├─packages
|    ├─components
|    |     ├─style
|    |     |   └index.scss          // 组件库全局样式
|    |     ├─src
|    |     |  ├─components.ts       // 导出所有组件
|    |     |  ├─index.ts            // 全局注册所有组件
|    |     |  ├─button              // 组件文件
|    |     |  |   ├─index.ts        // 在此进行导出和局部注册
|    |     |  |   ├─src             // ❗实际开发中只需要关注到src下的文件
|    |     |  |   |  ├─button.vue 
|    |     |  |   |  ├─style
|    |     |  |   |  |   └index.scss

建议采用命令pnpm component:create [component name]来创建新组件，帮助自动完成繁琐的引入和创建步骤。

如果不采用自动命令，则按照模板已创建的示例组件的模式来进行开发，这种方法会相当繁琐，因此强烈建议使用命令的方式进行新组件创建！

说明文档开发约定

less 复制代码

├─docs
|  ├─index.md               // 文档首页内容
|  ├─guide              
|  |   ├─features.md        // 特性
|  |   ├─started.md         // 快速上手
|  |   ├─components         // 各组件的具体说明
|  |   |     └button.md

只需要关注 docs/guide/components/ 下 md 文件的编写，会自动创建新的侧边栏内容以及路由，不需要关注其它的配置文件。

⚠️注意，需要在md文件采用以下的格式来确定侧边栏的名称：

md 复制代码

---
sider_text="按钮 button"
---

组件说明文档具体内容可参考示例组件。

自动化部署

具体文件在 ./.github/workflows/deploy.yaml

perl 复制代码

示例：
git tag docs@v0.0.1

git add .

git commit -m 'chore: update'

git push

git push origin docs@v0.0.1

其他

谢谢你能看到这里，vuecomp-starter目前刚起步一段时间，我个人目前的技术也十分有限，可能还存在许多不足的地方，如果大家对这个项目感兴趣的话，可以多提一些意见，也十分欢迎大家参与到这个项目中来，后续可能也会在这个模板的基础上开发自己的组件库。我也在这里，向大家求一个star，这是我开发的动力！

更详细的说明，请查看文档

【开源自荐】vuecomp-starter 组件库开发模板，轻松开发组件库