⽤vitePress快速创建⼀个⽂档项⽬
其实开发⼀个项⽬最需要的就是操作⽂档，⽂档的质量决定了项⽬的开发流程，开发规范等等。
对于前端框架来说，⽂档最友好的还是，不仅是中国⼈的框架，⽽且⽂档⽀持了中⽂。仔细查看 Vue 的官⽅⽂档，还有,,。发现尤⼤的⽂档都是⼀个模板刻出来的，⽽且也⾮常简洁好⽤。
原来是使⽤了这个框架⽣成的⽂档，让我们快速熟练使⽤这个框架。
于是我也⾃⼰写了⼀个的⽂档，使⽤ VitePress 开发⾮常快，于是我完成了的⽂档书写。
安装使⽤
1. 创建⽬录
D:>mkdir vitpress_demo && cd vitpress_demo
2. 包管理⼯具初始化
D:\vitpress_demo>npm init -y
3. 安装 vitepress 依赖
D:\vitpress_demo>npm i vitepress -D
4. 创建docs⽂件夹
D:\vitpress_demo>mkdir docs
5. 在docs⽂件夹下创建index.md⽂件并写⼊内容
# hello world
6. 创建 npm 脚本，快速启动，
到package.json修改scripts项为以下内容
{
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
}
7. npm 脚本启动项⽬
D:\vitpress_demo>npm run docs:dev
打开即可
配置介绍
在docs⽂件夹下创建.vitepress⽂件夹，并在.vitepress⽂件夹下创建config.js
config.js ⽂件内容需要导出⼀个模块，这个模块⾥的内容需要⾃⼰定义，才会在⽣效。⽽且每次更改需要重启项⽬才会⽣效。
title: "react-ant-admin", // 顶部左侧标题
base: "/doc-react-ant-admin/", // 项⽬的根路径
head: [
// 设置描述和关键词
[
"meta",
{ name: "keywords", content: "react react-admin ant 后台管理系统" },
],
[
"meta",
{
name: "description",
content:
"此框架使⽤与⼆次开发，前端框架使⽤react，UI框架使⽤ant-design，全局数据状态管理使⽤redux，ajax使⽤库为axios。⽤于快速搭建中后台页⾯。",
},
],
],
themeConfig: {
sidebar: {
// 侧边栏
"/": [
{
text: "介绍",
children: [
{ text: "什么是react-ant-admin？", link: "/" },
{ text: "开始使⽤", link: "/guide/start" },
{ text: "⽂件配置", link: "/guide/configuration" },
{ text: "路径配置", link: "/guide/path" },
],
},
],
},
nav: [
// 顶部右侧导航栏
{ text: "介绍", link: "/", activeMatch: "^/$|^/guide/" },
{
react开发框架text: "预览地址",
link: "p/react-ant-admin/",
},
{
text: "更多地址",
link: "/contact/",
},
],
},
};
使⽤注意
在docs⽂件夹下创建的md⽂件会以docs⽂件夹为路径映射举例
docs
├─ .vitepress
├─ test
│├─ index.md    url路径 /test/
│└─ start.md    url路径 /test/start.html
├─ guide
│├─ configuration.md    url路径 /guide/configuration.html
│└─ start.md            url路径 /guide/start.html
└─ index.md        url路径 /

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。