快速开始 #

vue-components-lib-seed 介绍 #

帮助你快速创建组件库。

• 🚀 使用 Vite 开发
• ✈️ 使用 esbuild 构建
• 🚁 用 ts-morph 生成类型

文档 #

• 文档示例

特点 #

• 🌈 快速开发和构建
• 🎆 自定义友好
• 📝 更漂亮的文档，支持中文和英文。 受益于vueuse，支持 暗黑模式。
• 🍭 丰富的脚本，灵感来自 esbuild-plugin-vue & vue-dts-gen
• 😋 类型友好
• 🚚 ESM 和 CJS 产品

怎样使用 #

通过 vuecompoent-seed 生成你的仓库

检查项 #

• [ ] Replace all my-lib words with your libary name. Just search my-lib and replace them in VScode
  • .gitignore
  • package.json
  • vite.config.ts
  • .vitepress
  • scripts ...

安装 #

yarn

开发模式 #

Benefited from vite-plugin-pages, the src/pages/index.vue is the entry page for development. You can visit /[component-name]/demo to check component, like http://localhost:3000/#/button/demo.

yarn dev

构建 #

yarn build

测试 #

yarn test

生成入口文件 #

入口文件是 rollup 的 input 选项。

yarn gen-entry

生成一个新的组件 #

您必须为此命令指定组件名称。

yarn gen [component\'s name]

生成 d.ts 文件 #

npx esno ./scripts/gen-dts.ts

发布你的组件库 #

This command will add git tag、generate changelog. You can test your lib with argument --dry

yarn release [--dry]

文档的构建 #

❗ Noted: you should run yarn build:lib before run this command. Because the docs need the build bundle.

开发文档 #

yarn docs:dev

构建文档 #

yarn docs:build

部署文档 #

vuecompoent-seed 提供了一个 github action。 当你将代码推送到 master 分支时，文档会自动部署在 gh-pages 分支上。然后你可以把 gh-pages 分支设置为 Github Pages 的来源。

在文档中使用组件 demo #

以 button 组件为例。

在 button.md 文件中, 插入如下代码：

:::demo  
src/packages/button/demo/demo0.vue  
:::
- or
:::demo  
src/packages/button/demo/demo*.vue  
:::

vuecomponent-sedd 提供了一个全局组件 Demos 用来展示所有的组件示例。 这也是当前展示组件实例的唯一方式。 了解更多.

自定义文档样式 #

你可以在 markdown 文件的 frontmatter 新增 class 字段, 全局组件 <Content> 将会继承你定义的 class。 当然, unocss 也能在这里使用。

---
class: 'custom-class'
---

推荐编辑器配置 #

VSCode + Volar.

如果你使用 <script setup> #

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

此项目离不开以下开源项目 #

• unplugin-vue
• esbuild-plugin-vue
• vue-dts-gen
• vueuse
• vitepress-for-component
• unocss
• Element Plus

特别感谢 #

eeeeelle ✍️ 发布脚本