前言
作为程序员，拥有自己的开源项目应该是一件如同呼吸一般正常的事情（大概，沉思ing）。
以普遍理性而论，程序员注重的是积累，优质的博客和github项目都是自己的最好背书，而临时抱佛脚的那种反而是负作用。
笔者恰好就是那种没有任何积累的在内卷中淡定躺平的杂鱼，是时候做点什么了！
做什么
稍微认真思考了一下，笔者决定做一个非常简易的标签页实现组件。
- 学习使用一下最新的Vue.js生态
- 熟悉vueRouter的设计和使用
- 不依赖admin框架的时候单独实现标签页功能（具体什么时候？反比如之前我们一个项目没用公司的组件是因为嫌弃那个组件有bug然后自己找了一个开源的用了）
- 想实现一下简单清晰的样式定制，这个需求是我自己的但我知识面不够没找到合适好用的，那我可以自己做一个
准备使用的开发环境依赖如下：
- pnpm
- Vite
- Vue.js ^3
- Typescript
- vitepress
- vue-router
- Element Plus
- eslint
- prettier
- commitizen
- standard-version
- husky
创建项目
要从这里开始吗？？？
创建github项目
给项目起名叫just-vue-tab，搜索了github和npm都没有被占用，可以使用。
因为参考了一些老文档和视频，并且考虑到发布npm包，所以还是使用了短线连接命名（其实也是不好改了感觉还是没问题的）。
搭建项目
# 使用pnpm和vite
pnpm create vite just-vue-tab --template vue-ts
cd just-vue-tab
# 初始化项目环境
pnpm install
# 关联远程仓库
git remote add origin git@github.com:baicy/just-vue-tab.git
git add .
git commit -m "init"
git push -u origin main
生成文档
安装使用VitePress
pnpm i vitepress -D
# npm scripts
{
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
# 在项目根目录下新建docs文件夹，编写文档
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ └─ index.md
└─ package.json
使用GitHub Pages和 GitHub Action
# 在./.github/workflow文件夹下创建文件deploy.yml
name: Deploy
on:
push:
branches: [ main ]
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/checkout@v3
# install node & deps
- name: Install node
uses: actions/setup-node@v3.2.0
with:
node-version: "14.X"
- name: Install deps
run: npm install
# build vitepress docs
- name: Build VitePress
run: npm run docs:build
# push actions
- name: Deploy to gh-pages
uses: JamesIves/github-pages-deploy-action@v4.3.3
with:
branch: gh-pages
folder: docs/.vitepress/dist
# preserve old hash files, only when docs change, display commit message
# defalt true, will automatically delete files
clean: false
# default true, will force-push and overwrite existing deployment
force: false
部分心得
先按照VitePress官方教学写了如下npm scripts
{
"deploy": "set -e && vitepress build docs && cd docs/.vitepress/dist && git init && git add -A && git commit -m 'deploy' && git push -f git@github.com:baicy/just-vue-tab.git main:gh-pages"
}
根据我几年前用hexo部署个博客没有自动化部署就再也不想写了的经验，CI是很重要的，根据VitePress官方文档就用起了Travis CI，文档全英文看了半天，设置了好多的key，然后发现它好像不给免费用了。
Google一番才知道现在Github Actions已经非常普及了，赶紧实（参）践（考）一下。
结果Github Action + Github Pages的实例我硬是没搜到，最后结合了Github Action前端VuePress自动化部署和还得是阮一峰大佬的教学，比较满意的完成了文档的自动化部署。
本来想自己写命令行的，发现要考虑的确实比较多，也没有必要。
最终实现了main分支的文档有变化的时候提交gh-pages的效果。
另外这里犯了个大错误。
因为修改了参数，我还清空了gh-pages分支，Github Action不会提交hashmap.json文件，gh-pages一直构建失败。补上了就好了。不知道之后结构发生变化会不会出bug...
以前也用过jekenis和Devops平台，但都没有去搭建（的机会），简单的说自动化，那就是自动化，但你不去实践，真的只能一问三不知了。
ps: 我现在才知道github已经把master改成main了（？？？）
发布项目
npm发布
# 接入standard-version
pnpm i standard-version -D
# 登录 npm
npm add user
npm login
# 添加npm scripts
{
"release": "standard-version && npm publish"
}
几个问题
- npmjs的F2A太麻烦啦
- 日志系统还没怎么研究，好像只会生成本地tag，不会进行真正的发布版本到github
- 项目没有写entry，unpkg的CDN无效，不过这种项目用不用CDN呢（完全不知道
将changelog写入文档
# 修改deploy.yml
...
# install node & deps
...
# build vitepress docs
- name: Build Release Notes
run: cp CHANGELOG.md docs/changelog.md
- name: Build VitePress
run: npm run docs:build
# push actions
...
这个是不会改变git中changelog.md的内容的
后记
接下来准备引入一些规范和封装基础api了，如果需要的话。
虽然准备用Typescript，在项目中我也用了它一年（cv大法）……但我其实对它很陌生……
突然觉得这个项目无从下手了_(:з」∠)_
