likes
comments
collection
share

十分钟用vitepress搭建项目文档

作者站长头像
站长
· 阅读数 7

前言

文档地址: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

十分钟用vitepress搭建项目文档

十分钟用vitepress搭建项目文档

打包

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
评论
请登录