vue3+vite+ts组件库

226 阅读1分钟

创建脚手架

npm create vite

写组件

packages/Button/src/index.vue

image.png

packages/Button/index.ts

image.png

packages/index.ts

image.png

库打包模式

build/base.config.ts

image.png

build/lib.config.ts

image.png

package.json

image.png

使用

全局引入

image.png

按需引入

image.png

文档

npm install vue-router@4

npm i vite-plugin-md -S

src/env.d.ts

image.png

src/router.ts

image.png

main.ts

image.png

build/base.config.ts

image.png

Button/src/docs/README.md

image.png

APP.vue

image.png

npm run dev

image.png

vite-plugin-md所带来的点击事件效果

Button/src/docs/demo.vue

image.png

Button/src/docs/README.md

image.png

npm run dev

image.png

代码预览功能

src/assets/markdown.css

src/assets/prism.css

高亮 npm install prismjs -D

src/components/Preview.vue

code.png

src/main.ts

image.png

Button/src/docs/README.md

image.png

npm run dev

image.png

命令式新建组件

npm i inquirer -S

npm i handlebars -S

script/genNewComp/index.js

image.png

script/genNewComp/infoCollector.js

code.png

script/genNewComp/tplReplacer.js

code.png

script/genNewComp/.template/index.ts.tpl

image.png

script/genNewComp/.template/install.ts.tpl

image.png

script/genNewComp/.template/router.ts.tpl

image.png

script/genNewComp/.template/src/index.vue.tpl

image.png

script/genNewComp/.template/docs/demo.vue.tpl

image.png

script/genNewComp/.template/docs/README.md.tpl

image.png

package.json

image.png

npm run gen

image.png

分开文档和库的构建逻辑

build/doc.confog.ts

复制packages 为了fetch script/copyDir.js

image.png

package.json

image.png

npm run build:doc

image.png