溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用技術：
VuePress - Vue 驅動的靜態網站生成器
倉庫地址：https://github.com/yinian-R/vuepress-demo
全局安裝
## 安裝 yarn global add vuepress # 或者：npm install -g vuepress
現有項目
如果你想在一個現有項目中使用 VuePress，同時想要在該項目中管理文檔，則應該將 VuePress 安裝為本地依賴。
## 沒有項目可以初始化 yarn init ## 將 VuePress 作為一個本地依賴安裝 yarn add -D vuepress # 或者：npm install -D vuepress ## 新建一個 docs 文件夾 mkdir docs ## 新建一個 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
一個 VuePress 網站必要的配置文件是 .vuepress/config.js，它應該導出一個 JavaScript 對象：
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around'
}
靜態資源
創建public文件夾，主要用于存放靜態資源
. ├─ docs │ └─ .vuepress │ └─ public │ └─ image │ └─ favicon.ico
添加網站 favicon，修改 .vuepress/config.js 內容
module.exports = {
head:[
['link', {rel:'icon', href:'/image/favicon.ico'}]
]
};
導航欄
你可以通過 themeConfig.nav 增加一些導航欄鏈接:
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 標題 tagline: Hero 副標題 actionText: 快速上手 → actionLink: /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 ---
側邊欄
想要使 側邊欄（Sidebar）生效，需要配置 themeConfig.sidebar，基本的配置，需要一個包含了多個鏈接的數組：
module.exports = {
themeConfig: {
sidebar: [
'/',
['/hello', 'hello page']
]
}
};
部署
設置部署站點的基礎路徑。
module.exports = {
base: '/vuepress-demo/',
};
在你的項目中，創建一個如下的 deploy.sh 文件
#!/usr/bin/env bash # 確保腳本拋出遇到的錯誤 set -e # 生成靜態文件 npm run docs:build # 進入生成的文件夾 cd docs/.vuepress/dist # 如果是發布到自定義域名 # echo 'www.example.com' > CNAME git init git add -A git commit -m 'deploy' # 如果發布到 https://<USERNAME>.github.io # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master # 如果發布到 https://<USERNAME>.github.io/<REPO> git push -f git@github.com:yinian-R/vuepress-demo.git master:gh-pages cd -
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
