VuePress 手摸手教你搭建Vue風格的技術文件/部落格

哈哈哈hh發表於2022-06-08
Vue

一 、通過雲開發平臺快速建立初始化應用

1.建立相關應用模版請參考連結： 基於Vue的極簡生成器 — Vuepress

2.完成建立後就可以在github中檢視到新增的vuepress倉庫

file

二 、 本地編寫 Vue文件風格的技術文件/部落格

1.將應用模版克隆到本地

  • 首先假定你已經安裝了Git、node，沒有安裝請移步node官網進行安裝。克隆專案：
git clone + 專案地址
  • 進入專案檔案
cd vuepress
  • 切換到feature/1.0.0 分支上
git checkout feature/1.0.0
  • 安裝依賴包
npm install
  • 啟動服務
 npm run dev

這裡開啟瀏覽器8080埠，並出現預設頁面。

2.專案效果

可能你會搭建出一個類似這樣的 文件：

file

file

3.首頁(像VuePress文件主頁一樣)

預設的主題提供了一個首頁，像下面一樣設定home:true即可，可以把下面的設定放入README.md中，待會兒你將會看到跟VuePress一樣的主頁。

---
home: true
heroImage: /logo.jpg
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
---

ps：你需要放一張圖片到public資料夾中。

4.基本配置

最標準的當然是官方文件,可以自己的需求來配置config.js。

可以參考一下我的config.js的配置：

module.exports = {
  title: '網站標題',
  description: '網站描述',
  // 注入到當前頁面的 HTML <head> 中的標籤
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }], // 增加一個自定義的 favicon(網頁標籤的圖示)
  ],
  base: '/web_accumulate/', // 這是部署到github相關的配置 下面會講
  markdown: {
    lineNumbers: true // 程式碼塊顯示行號
  },
  themeConfig: {
    sidebarDepth: 2, // e'b將同時提取markdown中h2 和 h3 標題，顯示在側邊欄上。
    lastUpdated: 'Last Updated' // 文件更新時間：每個檔案git最後提交的時間
  }
};

5.導航欄配置

file

module.exports = {
  themeConfig: {
    nav:[
      { text: '前端演算法', link: '/algorithm/' }, // 內部連結 以docs為根目錄
      { text: '部落格', link: '}, // 外部連結
      // 下拉選單
      {
        text: 'GitHub',
        items: [
          { text: 'GitHub地址', link: '},
          {
            text: '演算法倉庫',
            link: '
          }
        ]
      }        
    ]
  }
}

6.側邊欄配置

側邊欄的配置相對麻煩點，我裡面都做了詳細的註釋，仔細看，自己鼓搗鼓搗 就知道怎麼搞了。

module.exports = {
  themeConfig: {
      sidebar:{
        // docs資料夾下面的accumulate資料夾 文件中md檔案 書寫的位置(命名隨意)
        '/accumulate/': [
            '/accumulate/', // accumulate資料夾的README.md 不是下拉框形式
            {
              title: '側邊欄下拉框的標題1',
              children: [
                '/accumulate/JS/test', // 以docs為根目錄來查詢檔案 
                // 上面地址查詢的是：docs>accumulate>JS>test.md 檔案
                // 自動加.md 每個子選項的標題 是該md檔案中的第一個h1/h2/h3標題
              ]
            }
          ],
          // docs資料夾下面的algorithm資料夾 這是第二組側邊欄 跟第一組側邊欄沒關係
          '/algorithm/': [
            '/algorithm/', 
            {
              title: '第二組側邊欄下拉框的標題1',
              children: [
                '/algorithm/simple/test' 
              ]
            }
          ]
      }
  }
}

7.程式碼塊編譯錯誤

像下面這段程式碼會導致編譯錯誤，VuePress會去找裡面的變數，把它編譯成text：

{{}} 啦 {{}}

所以我們的程式碼塊要以這種形式書寫：

//```js
{{}} 啦 {{}} // 註釋需要開啟 這樣vuepress會把這裡麵包裹的當成程式碼塊而不是js
//```

並且這樣也會讓我們的程式碼高亮顯示(下圖第一個沒有高亮，第二個有高亮)，閱讀體驗更好：

file

8.更改標題

::: tip 替換tip的標題
這裡是內容。
:::

三 、 雲端一鍵部署上線應用

1.上傳程式碼

git add . 
git commit -m '新增你的註釋'
git push

2.在日常環境部署

一鍵進行應用部署。在應用詳情頁面點選日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以後可以點選訪問部署網站檢視效果。

file

3.配置自定義域名線上上環境上線

  • 配置線上環境自定義域名。在功能開發驗證完成後要線上上環境進行部署，線上上環境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們新增一個二級域名 company.workbench.fun 來繫結我們部署的前端應用。然後複製自定義域名下方的API閘道器地址對新增的二級域名進行CNAME配置。

file

  • 配置CNAME地址。複製好 API閘道器域名地址後，來到你自己的域名管理平臺（此示例中的域名管理是阿里雲的域名管理控制檯，請去自己的域名控制檯操作）。新增記錄的「記錄型別」選擇「CNAME」，在「主機記錄」中輸入你要建立的二級域名，這裡我們輸入「company」，在「記錄值」中貼上我們之前複製的 API閘道器域名地址，「TTL」保留預設值或者設定一個你認為合適的值即可。

file

  • 線上上環境部署上線。回到雲開發平臺的應用詳情頁面，按照部署的操作，點選線上環境的「部署按鈕」，部署完成以後就在你自定義的域名進行了上線。CNAME 生效之後，我們輸入 company.workbench.fun（示例網址） 可以開啟部署的頁面。至此，如何部署一個應用到線上環境，如何繫結自己的域名來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環境，用自己的域名玩起來吧 ；）

file

4.專案預覽效果

file

一鍵建立VuePress應用模版連結 ：

參考文獻：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/70003733/viewspace-2899360/，如需轉載，請註明出處，否則將追究法律責任。

相關文章