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