脚手架配置

npm create vite

新建文件

编写组件

packages/components/button/index.js

packages/components/index.js

使用组件

main.js

App.vue

效果

发布npm

build/base.config.js

build/lib.config.js

package.json

npm login

npm publish

全局与局部

全局

局部

配置 vue router 路由，指向 .md 文件

npm install vue-router@4

src/router.js

路由指向md

main.js

编写 vite 插件将 .md 文件解析成 vue 文件

引入 vite-plugin-md 插件来解析 Markdown 文件并把它变成 Vue 文件。

npm i vite-plugin-md -S

base.config.js

这样配置以后，任意的 Markdown 文件都能像一个 Vue 文件一样被使用了

npm run dev结果

代码预览功能

在Vite的文档里有记载到，它支持在资源的末尾加上一个后缀来控制所引入资源的类型。比如可以通过 import xx from 'xx?raw' 以字符串形式引入 xx 文件。基于这个能力，我们可以编写一个 <Preview /> 组件来获取所需要展示的文件源码。

preview.vue

下载插件 highlight.js 来实现代码高亮 main.js

npm run dev结果

文档构建逻辑

npm i copy-dir -D

复制packages 为了preview组件fetch拿到组件文档

config/copyDir.js

docs.config.js

package.json

部署站点

vite文档

vitejs.cn/guide/stati…

deploy.sh

packages.json

点击Settings ---> Pages ----> Source选择gh-pages分支然后点击链接访问

命令式新建组件

npm i inquirer -S

npm i handlebars -S

script/genNewComp/index.js

script/genNewComp/infoCollector.js

命令行输入配置

script/genNewComp/tplReplacer.js

1.根据模板输出组件文件

2.读取 packages/list.json 并更新

3.更新 router.js

4.更新 install.js

package.json

npm run gen