如何从零开始，用Vue3.2和Vite2.7快速构建一个UI组件库？

本文共计677个文字，预计阅读时间需要3分钟。

目录

1.前言

2.使用Vite搭建官网

2.1 创建项目 2.1.1 全局安装vite（此处我安装的版本是2.7.2） 2.1.2 创建一个vue模板（项目名可改为自己的名字） 2.1.3 安装完成后，按提示逐步执行命令 2.2 基础搭建

目录

• 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组件库的