Help you quickly create a component library.
- 🚀 dev with
Vite ✈️ build withesbuild- 🚁 generate types with
ts-morph
power by vitepress
- 🌈 Speedy dev & build
- 🎆 Customize friendly
- 📝 More beautiful doc, support
ChineseandEnglish. SupportDark Modeby vueuse - 🍭 Rich scripts, inspired by esbuild-plugin-vue & vue-dts-gen
- 😋 Type friendly
- 🚚
ESM&CJSproduct
Generate a repository by vue-components-lib-seed
- Replace all
my-libwords with your libary name. Just searchmy-liband replace them in VScode.gitignorepackage.jsonvite.config.ts.vitepressscripts...
yarnBenefited from
vite-plugin-pages, thesrc/pages/index.vueis the entry page for development. You can visit/[component-name]/demoto check component, likehttp://localhost:3000/#/button/demo.
yarn devyarn buildyarn testThe entry file is the
inputoption for rollup.
yarn gen-entryA component's name is required for this command.
yarn gen [component\'s name]npx esno ./scripts/gen-dts.tsThis command will add git tag、generate changelog. You can test your lib with argument
--dry
yarn release [--dry]❗ Noted: you should run
yarn build:libbefore run this command. Because the docs need the build bundle.
yarn docs:devyarn docs:buildHere is a git action. When you push the code to the master branch, the document will be automatically deployed on gh-pages branch.
Then you can set the Github Pages's source on the gh-pages branch.
Take button as an example.
In button.md, insert the following code
:::demo
src/packages/button/demo/demo0.vue
:::
- or
:::demo
src/packages/button/demo/demo*.vue
:::There is a global component Demos to display all demos.
This is currently the only way to show demo. More info.
You can add the class in frontmatter, then the <Content> would inherit the class. Of course, the unocss can be used here.
---
class: 'custom-class'
---<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).
 eeeeelle ✍️release-script |
|---|