用 vitePress 快速建立一個文件專案

阿政想暴富發表於2021-05-08
Vite

其實開發一個專案最需要的就是操作文件，文件的質量決定了專案的開發流程，開發規範等等。

對於前端框架來說，文件最友好的還是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路徑 /

相關文章