欢迎光临
我的个人博客网站

用 vitePress 快速创建一个文档项目

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

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

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

于是我也自己写了一个react-ant-admin的文档,使用 VitePress 开发非常快,于是我完成了doc-react-ant-admin的文档书写。

doc-react-ant-admin 文档源码

安装使用

  • 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 

打开 http://localhost:3000 即可

配置介绍

docs文件夹下创建.vitepress文件夹,并在.vitepress文件夹下创建config.js

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

module.exports = {   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/" },       {         text: "预览地址",         link: "https://azhengpersonalblog.top/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路径 / 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 用 vitePress 快速创建一个文档项目
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏