# 使用vuepress搭建簡易文檔??
對于這個靜態網站生成工具官方文檔是真的看的令人抓??特別是語言邏輯上看的是十分痛苦,我是先看別人搭建過程然后再回頭看官方文檔的??這樣比較好理解,先人踩坑后人享福
vuepress[官網](<https://v1.vuepress.vuejs.org/>)
awesome [更多資源](https://github.com/ulivz/awesome-vuepress) ??
這是我搭建好的文檔 [follow me](https://ragnar-document.github.io/vue-blog/)
GitHub地址:[????歡迎提交issue](https://github.com/ragnar-document/vue-blog)
### 像數 1, 2, 3 一樣容易!屁一堆坑好吧???
```bash
?? 注意先在Desktop中mkdir一個項目如何cd進去才開始??
# 安裝
? yarn global add vuepress # 或者:npm install -g vuepress
?? yarn global add vuepress@next # 或者:npm install -g vuepress@next
//第一個坑來了
# 新建一個 docs 文件夾
mkdir docs
# 新建一個 markdown 文件
echo '# Hello VuePress!' > docs/README.md
# 開始寫作
npx vuepress dev docs
```
??注意
請確保你的 Node.js 版本 >= 8.6。
```json
??在根目錄文件配置你的package.json文件
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
```
配置成功運行?? ?
```bash
yarn docs:dev # 或者:npm run docs:dev
```
配置目錄結構
```
.
├── docs
│ ├── .vuepress (可選的) 用于存放全局的配置、組件、靜態資源等。
│ │ ├── components (可選的) 該目錄中的 Vue 組件將會被自動注冊為全局組件。
│ │ ├── theme (可選的) 用于存放本地主題。
│ │ │ └── Layout.vue
│ │ ├── public (可選的) 靜態資源目錄。
│ │ ├── styles (可選的) 用于存放樣式相關的文件。
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可選的, 謹慎配置) 存儲 HTML 模板文件。
│ │ │ ├── dev.html /用于開發環境的 HTML 模板文件。
│ │ │ └── ssr.html /構建時基于 Vue SSR 的 HTML 模板文件。
│ │ ├── config.js (可選的) 配置文件的入口文件,也可以是 YML 或 toml。
│ │ └── enhanceApp.js (可選的) 客戶端應用的增強。
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
```
### 接下來我們開始填坑吧??
??建議:vuepress能不能把結構生成?? 啊?老天 簡直步步驚心
NO.1 `cd docs && mkdir .vuepress `
NO.2 `cd .vuepress thouch config.js `
在config.js???配置一下下面的代碼好吧
提前一起布置好吧::如果你打算發布到 `https://<USERNAME>.github.io/<REPO>/`(也就是說你的倉庫在 `https://github.com/<USERNAME>/<REPO>`),則將 `base` 設置為 `"/<REPO>/"`。
```js
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around'
base: `/vue-blog/`, //配置你要放的倉庫的路徑或子路徑文件名
}
```
運行起 dev server查看效果
### 我們先把它部署到GitHub Pages先然后在細化它??
查看一下根目錄的package.json????????下面的這段代碼
```json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"d": "bash deploy.sh" //順便把這個也配置了吧 這個是部署 npm run d
}
}
```
???的話下一步了哦
在根目錄下生成`thouch deploy.sh`
1. 在你的項目中,創建一個如下的 `deploy.sh` 文件(請自行判斷去掉高亮行的注釋):
```bash
#!/usr/bin/env sh
# 確保腳本拋出遇到的錯誤
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:<USERNAME>/<REPO>.git master:gh-pages
cd -
```
—與官網一致
1. 在你項目的根目錄下創建一個名為 `.gitlab-ci.yml` 的文件,無論何時你提交了更改,它都會幫助你自動構建和部署:
```yaml
image: node:9.11.1
pages:
cache:
paths:
- node_modules/
script:
- npm install
- npm run docs:build
artifacts:
paths:
- public
only:
- master
```
基本上按照以上步驟走的話是沒問題的如果???疏漏歡迎??給我提issue以免誤導他人
—原創---
阿龍的vuepress文檔
[?? 提意見 ??](https://github.com/ragnar-document/vue-blog/issues)
歡迎收看,但愿沒沒浪費你寶貴的時間~~
- 前言
- 你真的懂This嗎?
- 對象和對象構造函數
- 工廠功能和模塊模式
- API的使用
- async and await
- 關于async的很棒的一篇文章
- 掘金:關于forEach,map,fiter循環操作
- Node.js 實例與基礎
- 原創: Express 學習使用筆記
- 零碎知識點方法
- 關于滾動吸頂的方法
- Vue學習筆記
- Vue向導
- vuex是啥?
- vue代碼風格指南
- 關于vue的初體驗
- 超詳細解毒Vue
- Vue實例
- 模版語言
- 組件基礎
- 條件渲染、列表渲染、Class與style綁定
- Todolist的制作超詳細
- vue-router
- Vue基礎2.0x 筆記
- 搭建vuepress
- JavaScript之ES6
- 箭頭函數
- 這就是This