vuePress從零開始搭建自己專屬的文件集合

Joydezhong發表於2019-04-11
Vue

VuePress 由兩部分組成：一部分是支援用 Vue 開發主題的極簡靜態網站生成器，另一個部分是為書寫技術文件而優化的預設主題。在VuePress應用的目錄裡面，一個.md檔案可以生產一個.html檔案，資料夾目錄下預設訪問README.md檔案，也就相當於目錄下的index.html，所以本地測試環境訪問的連結如：http://localhost:8081/bar/barOne.html。

確保你的系統node.js版本 >= 8

環境搭建

安裝

全域性安裝：

npm install -g vuepress

建立專案目錄：

mkdir myproject

初始化專案：

cd myproject

npm init -y

新建docs資料夾：

mkdir docs

新建markdown檔案：

echo '# Hello VuePress!' > README.md

設定package.json啟動：

執行npm run build會生成靜態目錄dist

{
  "scripts": {
    "start": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}
複製程式碼

建立.vuepress目錄：

進入docs資料夾中建立.vuepress目錄存放vuePress的相關檔案

cd docs

mkdir .vuepress

建立config.js檔案：

進入.vuepress資料夾中建立config.js檔案，config.js是vuePress必要的配置檔案，它匯出一個js物件

cd .vuepress

type nul>config.js

基本配置

站點資訊

config.js配置：

config.js檔案包含網站的標題，描述，部署資訊等配置，其他詳細配置見官方文件

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}
複製程式碼

主題配置

預設主題配置：

進入docs目錄，修改README.md檔案

---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 簡潔至上
  details: 以 Markdown 為中心的專案結構，以最少的配置幫助你專注於寫作。
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 元件，同時可以使用 Vue 來開發自定義主題。
- title: 高效能
  details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被載入的時候，將作為 SPA 執行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
複製程式碼

導航欄配置：

配置config.js，可以使用themeConfig配置給站點新增導航連結，在docs目錄下新建about.md和contact.md檔案，其他詳細配置請檢視官方文件

module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'foo', link: '/foo/' },
      { text: 'bar', link: '/bar/' },
      { text: 'About', link: '/about' },
      { text: 'Contact', link: '/contact' },
    ]
  }
}
複製程式碼

新增其他頁面：

為了更好的演示側邊欄效果，新增四個頁面，分別在docs目錄下新增foo、bar資料夾，foo資料夾裡面新建fooOne.md、fooTwo.md、RADME.md檔案，新建檔案或資料夾可參考上面命令列工具

配置側邊欄：

配置config.js，可以使用sidebar配置給站點新增側邊欄

module.exports = {
    sidebar: {
      '/foo/': [
        '',
        'fooOne',
        'fooTwo'
      ],
      '/bar/': [
        '',
        'barOne',
        'barTwo'
      ]
    }
  }
}

複製程式碼

搜尋配置：

配置config.js，可以使用search配置站點是否禁用啟用搜尋，可以使用searchMaxSuggestions配置站點搜素顯示的結果條數

module.exports = {
    search: true,
    searchMaxSuggestions: 10
  }
}
複製程式碼

至此，一個簡單的vuePress應用基本配置已經完成，最終的config.js檔案如下：

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'foo', link: '/foo/' },
      { text: 'bar', link: '/bar/' },
      { text: 'About', link: '/about' },
      { text: 'Contact', link: '/contact' }
    ],
    sidebar: {
      '/foo/': [
        '',
        'fooOne',
        'fooTwo'
      ],
      '/bar/': [
        '',
        'barOne',
        'barTwo'
      ]
    },
    search: true,
    searchMaxSuggestions: 10
  }
}
複製程式碼

現在可以執行npm run build構建專案，生產dist目錄檔案，釋出到對應的服務上去了。

相關文章