VuePress是尤大神發(fā)布的一個全新的基于vue的文檔生成器
在線預(yù)覽 地址
源碼 地址
效果圖預(yù)覽 ↓ ↓ ↓
開發(fā)準(zhǔn)備
只需要滿足上述三個要求，任何人就都可以寫出來一套屬于自己的文檔網(wǎng)站~
新建github代碼倉庫
克隆代碼到本地
使用Github Pages
新建index文件
在當(dāng)前文件下新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>hello github</h1>
</body>
</html>
保存并提交代碼至github，提交代碼后等待1分鐘
瀏覽器訪問 http://自己的github用戶名.github.io 看到hello github 到這一步 Github Page已經(jīng)可以正常使用
如果不想用VuePress寫文檔，可以隨便寫點東西提交代碼即可更新。
VuePress 使用
安裝
# 全局安裝VuePress
npm install -D vuepress
本地新建文件夾>vuepress
vuepress/新建docs文件夾
vuepress/新建package.json文件
vuepress/docs/新建README.md文件
在docs/README.md中添加代碼
# my first vuepress
在package.json中添加代碼
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
在vuepress中啟動命令
npm run dev
啟動成功后打開看到以下頁面說明vuepress已經(jīng)初步配置成功
如果本地8080端口被占用請根據(jù)命令行中提示點端口進(jìn)行訪問
文件配置
docs/文件下新建public/文件下新建img/文件下放入一張圖片，用作首頁顯示圖片
修改首頁顯示文件 docs/README.md 官方配置手冊
---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 簡潔至上
details: 以 Markdown 為中心的項目結(jié)構(gòu)，以最少的配置幫助你專注于寫作。
- title: Vue驅(qū)動
details: 享受 Vue + webpack 的開發(fā)體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發(fā)自定義主題。
- title: 高性能
details: VuePress 為每個頁面預(yù)渲染生成靜態(tài)的 HTML，同時在頁面被加載的時候，將作為 SPA 運行。
footer: MIT Licensed | Copyright ? 2018-present Evan You
---
docs/文件下新建.vuepress文件夾/新建config.js文件
導(dǎo)航欄及側(cè)邊欄配置 .vuepress/config.js 官方配置手冊
module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'External', link: 'https://google.com' },
],
sidebar: [
'/',
'/page-a',
['/page-b', 'Explicit link text']
]
}
}
還可配置搜索框匹配、上/下一篇鏈接、自定義頁面等，官方文檔都寫的非常清楚，可根據(jù)需要自行配置即可。
打包項目
全部配置完成后打包項目
npm run build
打包成功之后找到 docs/.vuepress/dist 文件夾下文件，全部拷貝到剛開始配置的 Github Page代碼倉庫中，提交代碼，等待一分鐘后訪問 http://自己的github用戶名.github.io
到此已經(jīng)完成了所有配置，至于里面寫什么，完全有你自己決定了。
最后說下為什么用這種方式寫一些文章、筆記
我曾在自己的服務(wù)器上寫博客，筆記網(wǎng)站，優(yōu)點就是什么都可以自定義，并且想改什么就改什么。但是缺點太多了，自己部署服務(wù)器環(huán)境，裝mysql，寫后臺，寫數(shù)據(jù)庫，再寫前端...這下來搞得頭皮發(fā)麻，成果還不盡理想，最關(guān)鍵的是服務(wù)器最便宜一年也好好幾百。。萬一那天養(yǎng)不起服務(wù)器了，之前寫的東西就全白費了不是。
現(xiàn)在用github加vuepress，理論上來說，域名是永久可以訪問的，這樣一個在線文檔或博客（根據(jù)你自己的配置喜好），并且vuepress也是基于vue的單頁應(yīng)用，訪問速度及瀏覽反饋還是很棒的！
歡迎 star
歡迎留言討論交流～
