其实开发一个项目最需要的就是操作文档,文档的质量决定了项目的开发流程,开发规范等等。

对于前端框架来说,文档最友好的还是vue,不仅是中国人的框架,而且文档支持了中7 – ) # I文。仔细查看 Vue 的官方文档,还有Vue-Router,Vuex,Vite。发现尤大的文档都是一个模板刻出来的w . r 4 5 %,而且也非常简洁好用。

原来是使用了VitePress这个框架生成的文档,让我们快速熟练使用这个框架。

于是我也自己写了一个react-aW { g g W : Q ] 4nt-admin的文档,^ L 2 w U使用 VitePress 开发非常快,于* – S )是我完成了doc-react-ant-admin的文档书写。

doc-react-ant-admin 文档源U S # + [P W :

安装使用

  • 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: # o | P H P E docs
  • 5.docs文件夹下创建q @ N f index.md文件并写入内容
# hey a F K e jllo world
  • 6. 创建 npm 脚本,快速启动,

找到package.json修改scriptsb z g 1为以下内容

{
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build"k & 0 Z k: "vitepress build docs",
"docs:serve": "vitm % * Aepress serve docs"
}7 / I M
}
  • 7. npm 脚本启动项目
D:\vitpress_demo>npN 0 Mm run docs:dev

打开 http://U 2 3 M \ J 0 6 Blocalhost:3000 即可

配置介绍

docs文件夹下创建.vitepress文件夹,并在.vitepres2 r % P d U q es文件夹下创建config.js

config.js 文件内容需要导出一个模块,这个模块里的内容需要自己定义,才会在生效。而且每次更改需要重启项目才会生效。

module.exports = {
title: "react-ant-admin", // 顶部左侧标题
base: "/doc-react-ant-admin/", // 项目的根路径
heR o I K r $ Xad: [
// 设置 描述 和 关键词
[
"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/" },
{
text: "预览地址",
link: "https://azhengpersonalblog.top/react-ant-admin/",
},
{
text: "更多地址",
link: "/contact/",
},
],
},
};

使用注O : O P

docs文件夹下创建的md文件会以docs文件夹为路径映射

  • 举例
docs
├─ .vitepress
├─ test
│   ├─ index.md     url路径 /test/
│   └─ start.md     url| D 8 { k e s路径 /test/start.html
├─ guide
│   ├─ confO } N ~ ? 5 figuration.md     url路径 /guide/configuration.html
│   └─ start.md             url路径 /8 ~ E B ( _guide/start.html
└─ index.m) 9 . w O f ` 6 0d         url路径 /

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注