VuePress超詳細簡單教程

1）VuePress是什麼？

先讓我們看看 VuePress能幹什麼？有什麼效果？

image.png

很像vue官網的文檔頁面，因爲vuePress就是尤大大的一個力作
vuePress官網介紹介紹的很詳細，這裏只做搭建VuePress項目教程

2）安裝

注意 VuePress基於node 8.0+

 

npm install -g vuepress

創建工作文件夾 study
進入文件夾
快速初始化package.json

 

npm init -y

2.1 新建文件夾docs

配置package.json，添加下述兩行

 

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

進入docs文件夾 創建 README.md文件

此時運行命令

 

npm run  docs:dev

此時文件夾結構

 

study
+--docs
+----README.md
+--package.json

運行訪問http://localhost:8080/

image.png

結束運行 ，執行命令

 

npm run docs:build

然後看文件變化 多了個node_modules
docs 多了個 .vuepress文件夾

 

study
+--docs
+----.vuepress
+------ dist   //打包後的文件夾
+----README.md
+--package.json
+--node_modules

我們在.vuepress 創建
config.js 文件
添加

 

module.exports = {
  title: 'Adroi媒體API 接口文檔',  // 設置網站標題
  description : 'Adroi',
  base : '/v1/adroi-h5/adroiapi/',
  themeConfig : {
    nav : [
        { text: '接口定義', link: '/apiword' },
        { text: '接口字段定義', link: '/api' },
        { text: '附錄：錯誤碼', link: '/error' }
    ],
    sidebar: {
        '/' : [
      "/", //指的是根目錄的md文件 也就是 README.md 裏面的內容
            "apiword",  根目錄創建 apiword.md文件
            "api",根目錄創建 api.md文件
            "error" 根目錄創建 error.md文件
        ]
    },
    sidebarDepth : 2
  }
}

image.png

3）添加靜態圖片

 

![An image](./baner.png)

4)添加指定樣式

添加樣式 分兩種 一種不用預編譯處理、一種使用

 

//不使用預編譯處理
//直接在md文件底部添上
<style></style>

 

//使用預編譯處理
首先需要安裝所需的模塊  舉例：stylus
npm i stylus stylus-loader -D
<style lang="stylus"></style>

5)vuePress可添加js代碼

既然是尤大大的作品 那肯定是支持vue語法的
在MD文件中直接寫入js的語法

 

<script>
  export default{
    //...do something
}
</script>

6)代碼發佈或上傳至服務器

關於發佈問題：首先我們知道在打包後的文件都是靜態文件之前的MD文件都被打包成html靜態文件了,其次在文件config.js中 base至關重要

6-1發佈在雲盤中如百度雲盤 github上可直接通過鏈接訪問

在雲盤上創建根目錄如vuepress，然後在config中 bese這部分就填寫/vuepress,然後進行打包操作，再然後把打包後的文件上傳至雲盤上的vuepress文件中

6-2 通過服務器發佈

在服務器上安裝Apache或者nginx 這裏拿nginx舉例：
至於nginx 安裝 以及配置文件的解讀使用 我這裏就不詳述了，不瞭解的童鞋可以自己查閱相關文件

同樣base的填寫很重要

 

//爲了簡單明瞭 我們把打包好的文件放入nginx中html文件下  之前的文件可以清空
server {
        listen  8081;  //監聽8081端口
        server_name  localhost; //localhost:8081即可指向也可寫別名如local.vuepress.com.cn  那我們訪問這個端口的別名加端口就可以
        location / {
            root   /nginx/nginx-1.9.15/html; //至關重要你的入口文件在本機的位置
            index  index.html index.htm; //入口文件
        }
    }

6-3可以通過koa啓用服務發佈

具體代碼不詳述：可通過koa來學習

作者：十年之後_b94a
鏈接：https://www.jianshu.com/p/7a2cc8a7f40c
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。