前些天,用尽平生所学,写了一篇技术文章,Vue3项目框架搭建封装,一次学习,终身受益【万字长文,满满干货】,可惜掘金给的流量不多,点赞的人不多,评论的人几乎没有,收藏的人却不少,我想可能是万字长文看起来太吃力,于是花了3天时间用vitepress
搭建了一个项目文档,方便大家查阅。
文档地址:yinzhuo19970516.github.io/
现在,我准备花10min介绍一下,介绍一下这个vuepress
的小兄弟,vitepress
vitepress 是一款基于vite vue3的静态站点生成器
有什么问题看文档吧,推荐看英文文档,中文文档不全
遇到问题建议去github gitee 搜索,目前这类的博客比较少
.
├─ 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
以我配置的为例
export default {
title: 'vue-template',// 网站标题
description: 'vue-cli/二次封装/vue3/axios/多入口打包', //网站描述
ignoreDeadLinks: true,// 最好加上,构建时会忽略md中的外链
markdown: {
theme: 'material-palenight',//md主题
lineNumbers: true//md 加行号
},
lastUpdated: true,//显示最近更新时间
appearance: true,//可以选择深浅主题
// 主题配置
themeConfig: {
socialLinks: [//右上角图标和链接,icon 可用svg 配置
{ icon: 'github', link: 'https://github.com/Yinzhuo19970516/vue-template' },
{ icon: 'slack', link: 'https://juejin.cn/user/1011206428301774' }
],
lastUpdatedText: '更新时间',
siteTitle: 'vue-template',
nav: [//右侧导航
{ text: '首页', link: '/' },
{ text: '项目简介', link: '/page/index' },
{ text: '更新日志', link: 'https://github.com/Yinzhuo19970516/vue-template/blob/main/CHANGELOG.md' }
],
// 侧边导航
sidebar: [
{
text: '项目简介',
items: [
{ text: '为什么要写这个项目', link: '/page/why' },
{ text: '多入口打包', link: '/page/pages' },
{ text: '自动化生成项目基本模版', link: '/page/init' },
{ text: 'Pinia',link:'/page/pinia'},
{ text: '数据持久化',link:'/page/piniaPlugin'},
{ text: 'axios二次封装',link:'/page/axios'},
{ text: '路由跳转动画',link:'/page/router'},
{ text: 'less sass的优化处理',link:'/page/less'},
{ text: 'viewport适配方案',link:'/page/viewport'},
{ text: '环境变量',link:'/page/env'},
{ text: '兼容性处理方案',link:'/page/babel'},
{ text: '总结', link: '/page/all' },
]
}
],
outlineTitle: '目录'
}
}
首页就是进入我们博客会加载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新建一个仓库,、仓库命名为username.github.io的形式,username是你github的用户名。然后点击设置。
我的在这里:https://github.com/Yinzhuo19970516/Yinzhuo19970516.github.io 可直接抄作业,setting->pages->Brach->save
把dist 文件下的文件push 到建立的仓库里即可。
vitepress官方怕我们太累,提供给了一个脚本deploy.sh直接可以抄作业
我每次就是本地直接 zsh deploy.sh
过一会,https://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 -
还不错的一个文档框架,后续会在上面主要更新我的项目文档,有兴趣可以一起讨论,一起学习。