十分钟用vitepress搭建项目文档
前言
文档地址:yinzhuo19970516.github.io/
欢迎大家点赞,评论,收藏就算了,收藏了也不看。
现在,我准备花10min介绍一下,介绍一下这个vuepress
的小兄弟,vitepress
vitepress是什么
vitepress 是一款基于vite vue3的静态站点生成器
有什么问题看文档吧,推荐看英文文档,中文文档不全
遇到问题建议去github gitee 搜索,目前这类的博客比较少
vitepress怎么用
新建文件夹,文件夹下新建目录
.
├─ docs
│ └─ index.md
初始化
npm init
npm i vitepress
package.json添加script
"scripts": {
"dev": "vitepress dev docs --open",
"build": "vitepress build docs",
"serve": "vitepress serve docs"
},
运行
npm run dev
最基础的搭建就成功了
加配置文件
在docs目录下创建一个 .vuepress
目录,如下结构
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ └─ index.md
└─ package.json
配置项目介绍
以我配置的为例
首页布局
首页就是进入我们博客会加载docs/index.md,所以我们需要对其进行一个美化,我们VitePress默认主题提供了一个主页布局 参考我的吧,具体的意思很明显了,首页还挺好看的。
---
layout: home
title: vue-template
description: vue-cli/二次封装/vue3/axios/多入口打包
hero:
name: vue-template🎉
text:
tagline: 基于vue3,vue-cli4二次封装的移动端框架
actions:
- theme: brand
text: 开始
link: /page/index
- theme: alt
text: 访问github
link: https://github.com/Yinzhuo19970516/vue-template
---
运行
明暗交错,非常不错
npm run dev
打包
npm run build
默认在.vitepress/dist 目录下
部署到GitHub Pages
先在github新建一个仓库,、仓库命名为username.github.io的形式,username是你github的用户名。然后点击设置。
我的在这里:github.com/Yinzhuo1997… 可直接抄作业,setting->pages->Brach->save
把dist 文件下的文件push 到建立的仓库里即可。
自动化部署
vitepress官方怕我们太累,提供给了一个脚本deploy.sh直接可以抄作业
我每次就是本地直接 zsh deploy.sh
过一会,yinzhuo19970516.github.io/ 这个网站就会有最近的更新
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vitepress/dist
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:Yinzhuo19970516/Yinzhuo19970516.github.io.git master
cd -
总结
还不错的一个文档框架,后续会在上面主要更新我的项目文档,有兴趣可以一起讨论,一起学习。
转载自:https://juejin.cn/post/7130141388145967112