手把手教你搭建一個跟vue官方同款檔案（vuepress）

2021-01-16 16:00:16

前言

　　VuePress 由兩部分組成：第一部分是一個極簡靜態網站生成器 (opens new window)，它包含由 Vue 驅動的主題系統和外掛 API，另一個部分是為書寫技術檔案而優化的預設主題，它的誕生初衷是為了支援 Vue 及其子專案的檔案需求。

概要

基礎命令
基礎設定
總結

基礎命令（貼上覆制就行了，我也是複製過來的）

mkdir vuepress-starter && cd vuepress-starter

```
yarn init # npm init
```

yarn add -D vuepress # npm install -D vuepress

mkdir docs && echo '# Hello VuePress' > docs/README.md

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }   //在package.json 中設定啟動、打包命令

```
yarn docs:dev # npm run docs:dev
```

(存取http://localhost:8081)：success [11:30:31] Build 34c8e7 finished in 163 ms! ( http://localhost:8081/ ) 埠由你自己的服務決定哦

實際效果（這也太簡單了吧，所以繼續）

基礎設定

參考官方檔案
預期：左側邊欄，頭部，底部

　　在docs下面建立config.js 檔案（很重要），我的目錄結構就是這樣子啦~

看看config都有哪些設定

module.exports = {
    title: 'fannieGirl', // 顯示在左上角的網頁名稱以及首頁在瀏覽器標籤顯示的title名稱
    description: 'fannieGirl的前端記錄', // meta 中的描述文字，用於SEO
    // 注入到當前頁面的 HTML <head> 中的標籤
    head: [
        ['link', { rel: 'icon', href: '/avatar.gif' }],  //瀏覽器的標籤欄的網頁圖示
    ],
    markdown: {
        lineNumbers: true
    },
    serviceWorker: true,
    themeConfig: {
        logo: '/avatar.gif',
        lastUpdated: 'lastUpdate', // string | boolean
        nav: [
            { text: '首頁', link: '/' },
            {
                text: '分類',
                ariaLabel: '分類',
                items: [
                    { text: '文章', link: '/pages/folder1/test1.md' },
                    { text: '日記', link: '/pages/folder2/test4.md' },
                ]
            },
            { text: '功能演示', link: '/pages/folder1/test3.md' },
            { text: 'Github', link: 'https://github.com/dwanda' },
        ],
        sidebar: {
            '/pages/folder1/':[
                {
                    title: '測試選單1',   // 必要的
                    collapsable: false, // 可選的, 預設值是 true,
                    sidebarDepth: 1,    // 可選的, 預設值是 1
                    children: [
                        ['test1.md', '子選單1'],
                        ['test3.md', '子選單2']
                    ]
                },
                {
                    title: '測試選單2',
                    collapsable: false, // 可選的, 預設值是 true,
                    children: [
                        ['test2.md', '子選單1']
                    ]
                }
            ],
        }
    }
}

Fannie總結

　　搭建這樣的檔案，拿一份別人設定好了的就行了。so easy!

　　效果是很十分的巴適，想部署到我的github.io上面！但是三年前我用hexo搭建了個人部落格。今天存取還是拒絕連線了（但我解決了這個問題）
　　搭建好了本地這個檔案，我打算開始寫jointJs 教學（主要是官方的檔案十分令人抓狂）也在考慮是不是要幹掉Hexo部落格。。。。還有有。。。非主流的告白）
　　時間猝不及防，情感風輕雲淡，但程式碼程式是最真誠的，依然還在計算在一起多少天了~~~~~

手把手教你搭建一個跟vue官方同款檔案（vuepress）

熱門文章