1）VuePress是什么？
先讓我們看看 VuePress能干什么？有什么效果？
image.png
很像vue官網(wǎng)的文檔頁面，因為vuePress就是尤大大的一個力作
vuePress官網(wǎng)介紹介紹的很詳細(xì)，這里只做搭建VuePress項目教程
2）安裝
注意 VuePress基于node 8.0+
npm install -g vuepress
創(chuàng)建工作文件夾 study
進(jìn)入文件夾
快速初始化package.json
npm init -y
2.1 新建文件夾docs
配置package.json，添加下述兩行
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
進(jìn)入docs文件夾 創(chuàng)建 README.md文件
此時運行命令
npm run docs:dev
此時文件夾結(jié)構(gòu)
study
+--docs
+----README.md
+--package.json
image.png
結(jié)束運行 ，執(zhí)行命令
npm run docs:build
然后看文件變化 多了個node_modules
docs 多了個 .vuepress文件夾
study
+--docs
+----.vuepress
+------ dist //打包后的文件夾
+----README.md
+--package.json
+--node_modules
我們在.vuepress 創(chuàng)建
config.js 文件
添加
module.exports = {
title: 'Adroi媒體API 接口文檔', // 設(shè)置網(wǎng)站標(biāo)題
description : 'Adroi',
base : '/v1/adroi-h5/adroiapi/',
themeConfig : {
nav : [
{ text: '接口定義', link: '/apiword' },
{ text: '接口字段定義', link: '/api' },
{ text: '附錄：錯誤碼', link: '/error' }
],
sidebar: {
'/' : [
"/", //指的是根目錄的md文件 也就是 README.md 里面的內(nèi)容
"apiword", 根目錄創(chuàng)建 apiword.md文件
"api",根目錄創(chuàng)建 api.md文件
"error" 根目錄創(chuàng)建 error.md文件
]
},
sidebarDepth : 2
}
}
image.png
3）添加靜態(tài)圖片
4)添加指定樣式
添加樣式 分兩種 一種不用預(yù)編譯處理、一種使用
//不使用預(yù)編譯處理
//直接在md文件底部添上
<style></style>
//使用預(yù)編譯處理
首先需要安裝所需的模塊 舉例：stylus
npm i stylus stylus-loader -D
<style lang="stylus"></style>
5)vuePress可添加js代碼
既然是尤大大的作品 那肯定是支持vue語法的
在MD文件中直接寫入js的語法
<script>
export default{
//...do something
}
</script>
6)代碼發(fā)布或上傳至服務(wù)器
關(guān)于發(fā)布問題：首先我們知道在打包后的文件都是靜態(tài)文件之前的MD文件都被打包成html靜態(tài)文件了,其次在文件config.js中 base至關(guān)重要
6-1發(fā)布在云盤中如百度云盤 github上可直接通過鏈接訪問
在云盤上創(chuàng)建根目錄如vuepress，然后在config中 bese這部分就填寫/vuepress,然后進(jìn)行打包操作，再然后把打包后的文件上傳至云盤上的vuepress文件中
6-2 通過服務(wù)器發(fā)布
在服務(wù)器上安裝Apache或者nginx 這里拿nginx舉例：
至于nginx 安裝 以及配置文件的解讀使用 我這里就不詳述了，不了解的童鞋可以自己查閱相關(guān)文件
同樣base的填寫很重要
//為了簡單明了 我們把打包好的文件放入nginx中html文件下 之前的文件可以清空
server {
listen 8081; //監(jiān)聽8081端口
server_name localhost; //localhost:8081即可指向也可寫別名如local.vuepress.com.cn 那我們訪問這個端口的別名加端口就可以
location / {
root /nginx/nginx-1.9.15/html; //至關(guān)重要你的入口文件在本機(jī)的位置
index index.html index.htm; //入口文件
}
}
6-3可以通過koa啟用服務(wù)發(fā)布
具體代碼不詳述：可通過koa來學(xué)習(xí)
