VuePress搭建靜態網站

注意：使用VuePress前請確保你的 Node.js 版本 >= 8。

一、安裝（啓動服務）

1. 全局安裝

# 安裝
yarn global add vuepress # 或者：npm install -g vuepress

# 創建項目目錄
mkdir vuepress-starter && cd vuepress-starter

# 在docs文件夾下新建一個 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 開始寫作
vuepress dev .

# 構建靜態文件
vuepress build .

2. 現有項目中使用

# 將 VuePress 作爲一個本地依賴安裝
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一個 docs 文件夾
mkdir docs

# 新建一個 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 開始寫作
npx vuepress dev docs

3. 在vuepress項目文件夾下的 package.json 里加一些腳本:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

4. 開發與打包

然後就可以開始寫作了:

yarn docs:dev # 或者：npm run docs:dev

要生成靜態的 HTML 文件，運行：

yarn docs:build # 或者：npm run docs:build

默認情況下，文件將會被生成在 .vuepress/dist，當然，你也可以通過 .vuepress/config.js 中的 dest 字段來修改，生成的文件可以部署到任意的靜態文件服務器上

最後，看一下最簡單的目錄結構：

二、配置首頁 docs/README.md ==> 默認訪問的首頁就是這個頁面

參考官網：https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E9%A6%96%E9%A1%B5

配置詳情：

---
home: true
heroImage: /img/logo.png
actionText: 開始學習 →
actionLink: /vue/
features:
- title: Wiki - 夯實基礎
  details: 基於JavaScript對工作用常用知識點和重要知識點進行整理，記錄，歸檔，以便時時學習。溫故而知新...
- title: Store - 技術更新
  details: 針對時下主流技術，結合自身學習掌握，總結整理，多種方式記錄。吾將上下而求索...
- title: Thought - 隨筆、面試
  details: 總結工作中遇到的問題，引以爲戒；記錄常見、經典、有意思的面試題，掌握學習方向與公司要求；魚與熊掌我要兼得...
footer: MIT Licensed | Copyright © 2019-12 By halo1416
---

三、配置導航欄

參考官網： https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F

在docs目錄下，新建目錄 .vuepress （主要必須有. ）; 並新建配置文件 config.js

配置詳情：

module.exports = {
    ... 
    themeConfig: {
        // 配置頂部導航欄
        nav: [
            { text: 'home', link: '/' },
            { text: 'JavaScript', link: '/javaScript/' },
            { text: 'vue技術棧', link: '/vue/' },
            { text: 'react技術棧', link: '/react/' },
            { text: 'webpack', link: '/webpack/' },
            { text: '組件封裝', link: '/moduleComponents/' },
            // { text: '面試題', link: '/interview/' },
            {       //下拉導航欄
                text: '面試/隨筆',
                ariaLabel: '面試/隨筆 Menu',
                items: [
                  { text: '面試題', link: '/recordSelf/interview/' },
                  { text: '隨筆', link: '/recordSelf/problem/' }
                ]
            }
        ],

        ...
    }    
}

四、配置側邊欄 config.js

參考官網： https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F

module.exports = {
    ... 
    themeConfig: {
        // 配置每個菜單對應的側邊欄
        sidebar: {
            // '/webpack/': [               //自動生成側邊欄菜單名稱
            //     '',     /* /webpack/ */
            //     'base',  /* /webpack/base.html */
            // ],
            '/webpack/': [               //自定義菜單欄菜單名稱  ==>> webpack菜單下的側邊欄
                ['/webpack/','介紹'],           //一級菜單
                {title: '基本配置',              //多級菜單
                    children: [
                        // ['',''] //=>[路徑,標題]
                        ['基礎1','單入口單出口'],  // '/webpack/base.md'文件
                    ]
                },  
            ],
            '/moduleComponents/': [             // moduleComponents菜單下的側邊欄
                ['/moduleComponents/table','表格封裝'],           //一級菜單
            ]
        },

        ...
    }    
}

完整的 config.js 配置：

module.exports = {
    title: '個人前端知識積累',
    description: '前端路漫漫，不知終點，不斷記錄，慢慢積累',
    head: [
        // 增加一個自定義的 favicon(網頁標籤的圖標)
        // 這裏的 '/' 指向 docs/.vuepress/public 文件目錄 
        // 即 docs/.vuepress/public/img/favicon.ico
        ['link', { rel: 'icon', href: '/favicon.ico' }]
    ],
    themeConfig: {
        // 配置頂部導航欄
        nav: [
            { text: 'home', link: '/' },
            { text: 'JavaScript', link: '/javaScript/' },
            { text: 'vue技術棧', link: '/vue/' },
            { text: 'react技術棧', link: '/react/' },
            { text: 'webpack', link: '/webpack/' },
            { text: '組件封裝', link: '/moduleComponents/' },
            // { text: '面試題', link: '/interview/' },
            {       //下拉導航欄
                text: '面試/隨筆',
                ariaLabel: '面試/隨筆 Menu',
                items: [
                  { text: '面試題', link: '/recordSelf/interview/' },
                  { text: '隨筆', link: '/recordSelf/problem/' }
                ]
            }
        ],

        // 配置每個菜單對應的側邊欄
        sidebar: {
            // '/webpack/': [               //自動生成側邊欄菜單名稱
            //     '',     /* /webpack/ */
            //     'base',  /* /webpack/base.html */
            // ],
            '/webpack/': [               //自定義菜單欄菜單名稱  ==>> webpack菜單下的側邊欄
                ['/webpack/','介紹'],           //一級菜單
                {title: '基本配置',              //多級菜單
                    children: [
                        // ['',''] //=>[路徑,標題]
                        ['基礎1','單入口單出口'],  // '/webpack/base.md'文件
                    ]
                },  
            ],
            '/moduleComponents/': [             // moduleComponents菜單下的側邊欄
                ['/moduleComponents/table','表格封裝'],           //一級菜單
            ]
        },
        // sidebarDepth: 2,
        // displayAllHeaders: true,
    }    
}

對應的目錄結構：