redstar/redstar-standlone/redstar-doc/redstar-product-doc/docs/env/vitepress.md

🍀 使用 vitepress 来编写文档

💡作者：聂芳华 📅时间：2021年6月4日

vitepress是 Vite 和 Vue 驱动的静态网站生成器。
主要特点是快，非常快。

🗒 1. 搭建最基础的框架

# 1. 建立和进入文件夹
mkdir redstar-web-doc && cd redstar-web-doc
 
# 2. vitepress 首选推荐使用yarn 创建包管理工具进行初始化
yarn init

# 3. 本地安装vitepress
yarn add --dev vitepress
 
# 4. 创建你的第一个文档
mkdir docs && echo '# 前端开发' > docs/index.md
 
# 5. 给package.json添加相关命令
    {
      "scripts": {
        "docs:dev": "vitepress dev docs",
        "docs:build": "vitepress build docs",
        "docs:serve": "vitepress serve docs"
      }
    }
 
# 6. 本地运行vitepress
    yarn docs:dev

# 7. 打开 http://localhost:3000/ 进行查看

🗒 2. 规划目录结构

🥕 docs 是咱们的文档目录。     
在docs 根目录下的 index.md 文件是我们的根文件，访问网站的时候会访问它。  

🥕 .vitepress 配置目录。
目录里面的 config.js 是vitepress 的配置文件。  

🥕 public 下面是公共文件。
所有的图片都存放在 public 下面的 img 里面。  

🥕 env 是咱们自定义的目录。
这里面存放的是咱们的环境搭建的相关文档。  
如果文件较多，建议可以分为多个目录来分类编写。  

🗒 3. 配置文件

// 侧边栏在config.js 中配置
module.exports = {
    base: '/book/web/', // 简单说如下配置就会让你的项目的路径
    // 从 `https://domain.com/` 变成 `https://domain.com/book/web/`
    lang: 'zh-CN', // 页面 HTML 的 lang 属性， 这里使用中文。
    title: '前端开发', // 页面标题，也会显示在 navbar 上
    description: '前端网站开发', // 渲染成页面的 `<meta name="description" content="前端网站开发">`

    themeConfig: {
      search: true,
      sidebar: {
      '/env/': [
      {
      text: '📙 环境搭建',
      children: [
      { text: '📄 vitepress 编写文档', link: '/env/vitepress' },
      { text: '📄 nvm 环境搭建', link: '/env/nvm' },
      { text: '📄 npm 使用', link: '/env/npm001'}
      ]
      }]
    }
  }
}

🗒 4. 引用图片

public 里面的图片可以直接用 / 来引用。
如下
![nvm-windows下载](/img/img-nvm-001.png)