使用技術(shù):
VuePress - Vue 驅(qū)動的靜態(tài)網(wǎng)站生成器
倉庫地址:https://github.com/yinian-R/vuepress-demo
全局安裝
## 安裝 yarn global add vuepress # 或者:npm install -g vuepress
現(xiàn)有項(xiàng)目
如果你想在一個(gè)現(xiàn)有項(xiàng)目中使用 VuePress,同時(shí)想要在該項(xiàng)目中管理文檔,則應(yīng)該將 VuePress 安裝為本地依賴。
## 沒有項(xiàng)目可以初始化 yarn init ## 將 VuePress 作為一個(gè)本地依賴安裝 yarn add -D vuepress # 或者:npm install -D vuepress ## 新建一個(gè) docs 文件夾 mkdir docs ## 新建一個(gè) markdown 文件 echo # Hello VuePress! > docs/README.md ## 開始寫作 npx vuepress dev docs
接著,在 package.json 里加一些腳本:
{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }
基本配置
. ├─ docs │ ├─ README.md │ └─ .vuepress │ └─ config.js
一個(gè) VuePress 網(wǎng)站必要的配置文件是 .vuepress/config.js,它應(yīng)該導(dǎo)出一個(gè) JavaScript 對象:
module.exports = { title: 'Hello VuePress', description: 'Just playing around' }
靜態(tài)資源
創(chuàng)建public文件夾,主要用于存放靜態(tài)資源
. ├─ docs │ └─ .vuepress │ └─ public │ └─ image │ └─ favicon.ico
添加網(wǎng)站 favicon,修改 .vuepress/config.js 內(nèi)容
module.exports = { head:[ ['link', {rel:'icon', href:'/image/favicon.ico'}] ] };
導(dǎo)航欄
你可以通過 themeConfig.nav 增加一些導(dǎo)航欄鏈接:
module.exports = { themeConfig: { nav: [ { text: '主頁', link: '/' }, { text: '指南', link: '/guide/' }, { text: '語言', items: [ { text: '中文', link: '/language/chinese/' }, { text: 'English', link: '/language/english/' } ] }, { text: 'GitHub', link: 'https://github.com' } ] } };
首頁
需要在dosc/README.md指定 home: true
--- home: true heroImage: /image/favicon.ico heroText: Hero 標(biāo)題 tagline: Hero 副標(biāo)題 actionText: 快速上手 → actionLink: /guide/ features: - title: 簡潔至上 details: 以 Markdown 為中心的項(xiàng)目結(jié)構(gòu),以最少的配置幫助你專注于寫作。 - title: Vue驅(qū)動 details: 享受 Vue + webpack 的開發(fā)體驗(yàn),在 Markdown 中使用 Vue 組件,同時(shí)可以使用 Vue 來開發(fā)自定義主題。 - title: 高性能 details: VuePress 為每個(gè)頁面預(yù)渲染生成靜態(tài)的 HTML,同時(shí)在頁面被加載的時(shí)候,將作為 SPA 運(yùn)行。 footer: MIT Licensed | Copyright © 2018-present Evan You ---
側(cè)邊欄
想要使 側(cè)邊欄(Sidebar)生效,需要配置 themeConfig.sidebar,基本的配置,需要一個(gè)包含了多個(gè)鏈接的數(shù)組:
module.exports = { themeConfig: { sidebar: [ '/', ['/hello', 'hello page'] ] } };
部署
設(shè)置部署站點(diǎn)的基礎(chǔ)路徑。
module.exports = { base: '/vuepress-demo/', };
在你的項(xiàng)目中,創(chuàng)建一個(gè)如下的 deploy.sh 文件
#!/usr/bin/env bash # 確保腳本拋出遇到的錯(cuò)誤 set -e # 生成靜態(tài)文件 npm run docs:build # 進(jìn)入生成的文件夾 cd docs/.vuepress/dist # 如果是發(fā)布到自定義域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # 如果發(fā)布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果發(fā)布到 https://<USERNAME>.github.io/<REPO> git push -f git@github.com:yinian-R/vuepress-demo.git master:gh-pages cd -
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com