Vue3+element-plus+vite 组件的二次封装– 将生成vitepress 静态资源文档发布到Github pages以及Gitee pages，薅羊毛，免费静态站点

小半 • 2022年12月30日下午3:02 • 前端开发 • 阅读 296

本人是一个web前端开发工程师，主要是vue框架，整理了一些Vue常用的技术，一方面是分享，一方面是做总结，今后也会一直更新，有好建议的同学欢迎评论区分享 ;-）

Vue组件库专栏：点击此处
Vue专栏：点击此处
Vue2 vs Vue3 专栏：点击此处
Typescript专栏：点击此处

文章目录

组件库开发流程
Pages 服务
github pages 的实现
Gitee pages 的实现

组件库开发流程

Vue组件库专栏会按顺序执行一下流程，不断完善组件库开发流程

Vue3+element-plus+vite 组件的二次封装，封装了头部的搜索条件栏，tabel栏，分页栏，form表单，都设置成了通过json可配置项，方便复用；
封装好了就开始打包，并且进行本地测试；
组件库发布到npm；
添加vitest单元测试框架；
添加vuepress文档。
将vuepress发布到github或者gitee，实现免费静态站点（本章相关）

Pages 服务

Pages 服务仅供博客 / 门户 / 开源项目网站 / 开源项目静态效果演示用途，请勿用于违规内容.

vitepress 文档已经完成了，这个章节，将讲述如何将文档发布到github 以及gitee 的pages 服务上。

github pages 的实现

如果你的电脑有多个账号可以看看这个文章。
配置多个SSH-KEY 多个github以及gitee：点击此处

0. 新建一个新的仓库

记得仓库名：penk-ui-official，后面要用到

1. 修改vitepress的配置文件

官网：点击此处

base:"/penk-ui-official/"

记得带双左右两边的 **/**

2. 在项目根目录下创建脚本文件 github_deploy.sh

3. github_deploy.sh 配置

#!/usr/bin/env sh

# 忽略错误
set -e

# 构建
npm run docs:build

# 进入待发布的目录
cd docs/.vitepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy' 

# 如果部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果是部署到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:GitHub-ZYP/penk-ui-official.git master:gh-pages

# 回到之前的目录
cd -