如何利用vitePress快速创建文档项目

1. 安装使用

   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文件夹为路径映射

   艾米网_爱生活、爱分享！