一 、通過云開發平臺快速創建初始化應用
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
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/487919.html
標籤：Linux
上一篇：yum安裝 一直出現There are no enabled repositories in “/etc/yum.repos.d“, “/etc/yum/repos.d“, 的解決辦法