一 、通過雲開發平臺快速創建初始化應用 1.創建相關應用模版請參考鏈接：基於Vue的極簡生成器 — Vuepress 2.完成創建後就可以在github中查看到新增的vuepress倉庫 二 、 本地編寫 Vue文檔風格的技術文檔/博客 1.將應用模版克隆到本地 首先假定你已經安裝了Git、node ...
一 、通過雲開發平臺快速創建初始化應用
1.創建相關應用模版請參考鏈接：基於Vue的極簡生成器 — Vuepress
2.完成創建後就可以在github中查看到新增的vuepress倉庫
二 、 本地編寫 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.項目效果
可能你會搭建出一個類似這樣的文檔：
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.導航欄配置
module.exports = {
themeConfig: {
nav:[
{ text: '前端演算法', link: '/algorithm/' }, // 內部鏈接 以docs為根目錄
{ text: '博客', link: 'http://obkoro1.com/' }, // 外部鏈接
// 下拉列表
{
text: 'GitHub',
items: [
{ text: 'GitHub地址', link: 'https://github.com/OBKoro1' },
{
text: '演算法倉庫',
link: 'https://github.com/OBKoro1/Brush_algorithm'
}
]
}
]
}
}
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
//```
並且這樣也會讓我們的代碼高亮顯示(下圖第一個沒有高亮，第二個有高亮)，閱讀體驗更好：
8.更改標題
::: tip 替換tip的標題
這裡是內容。
:::
三 、 雲端一鍵部署上線應用
1.上傳代碼
git add .
git commit -m '添加你的註釋'
git push
2.在日常環境部署
一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以後可以點擊訪問部署網站查看效果。
3.配置自定義功能變數名稱線上上環境上線
- 配置線上環境自定義功能變數名稱。在功能開發驗證完成後要線上上環境進行部署，線上上環境的「部署配置」-「自定義功能變數名稱」中填寫自己的功能變數名稱。例如我們添加一個二級功能變數名稱 company.workbench.fun 來綁定我們部署的前端應用。然後複製自定義功能變數名稱下方的API網關地址對添加的二級功能變數名稱進行CNAME配置。
- 配置CNAME地址。複製好 API網關功能變數名稱地址後，來到你自己的功能變數名稱管理平臺（此示例中的功能變數名稱管理是阿裡雲的功能變數名稱管理控制台，請去自己的功能變數名稱控制台操作）。添加記錄的「記錄類型」選擇「CNAME」，在「主機記錄」中輸入你要創建的二級功能變數名稱，這裡我們輸入「company」，在「記錄值」中粘貼我們之前複製的 API網關功能變數名稱地址，「TTL」保留預設值或者設置一個你認為合適的值即可。
- 線上上環境部署上線。回到雲開發平臺的應用詳情頁面，按照部署的操作，點擊線上環境的「部署按鈕」，部署完成以後就在你自定義的功能變數名稱進行了上線。CNAME 生效之後，我們輸入 company.workbench.fun（示例網址） 可以打開部署的頁面。至此，如何部署一個應用到線上環境，如何綁定自己的功能變數名稱來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環境，用自己的功能變數名稱玩起來吧 ；）
4.項目預覽效果
一鍵創建VuePress應用模版鏈接 ：https://workbench.aliyun.com/application/front/create?fromConfig=6&fromRepo=sol_github_6
參考文獻：https://juejin.cn/post/6844903673672237069#heading-10
