如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库

目录

• 1. 前言
• 2. 使用Vite搭建官网
• 2.1 创建项目
• 2.1.1. 全局安装vite（这里我装的时候是2.7.2）
• 2.1.2. 构建一个vue模板(项目名可以改成自己的名字)
• 2.1.3. 装好之后按照提示逐步执行命令
• 2.2 基本完成官网的搭建
• 2.2.1. 下载vue-router
• 2.2.2. 创建home首页与doc文档页 以及顶部导航栏
• 2.2.3. 配置路由
• 3. 封装一个Button组件
• 4. 封装Markdown组件介绍文档
• 4.1. 下载
• 4.2. main.ts中引入
• 4.3. vite.config.js中配置vite-plugin-markdown插件
• 4.4. 封装Markdown组件
• 4.5. 创建介绍页面路由
• 5. 自定义代码块获取组件展示源代码
• 5.1. 自定义插件vue-custom-blocks-plugin
• 5.2. 在vite.config.ts中配置
• 5.3. 封装Preview组件展示
• 5.4. 使用Preview组件
• 5.5. 高亮源代码
• 6. 去掉示例中的文件导入
• 6.1. 在lib目录下创建main.ts 这个也是作为之后打包上传至npm的入口
• 6.2. main.ts中导入注册
• 6.4. 效果
• 7. 部署到github官网
• 7.1. 打包
• 7.2. 上传至github
• 7.3. 进入仓库Settings最底层
• 7.4. 找到GitHub Pages
• 7.5. 选择master分支 点击保存 链接就生成了
• 7.6 一键部署
• 8. 上传至npm
• 8.1. 创建rollup.config.js配置文件
• 8.2. 执行命令打包
• 8.3. 效果
• 8.4. 上传至npm
• 9. 最后

1. 前言

最近自己学习写了一个基于Vue3的组件库，感觉有点意思，这篇文章来记录一下我是怎么从0快速打造一个UI组件库的

• 觉得上面的内容有用吗？快来点个赞吧！

  点赞() 我要打赏

  温馨提示 : 本站内容来自会员投稿以及互联网，所有源码及教程均为作者总结编辑，请大家在使用过程中提前做好备份，以免发生无法预知的错误，源码类教程请勿直接用于生产环境！