VuePress 完整使用教程

官網

官網地址：https://vuepress.vuejs.org/zh/

環境

1.node

hexo 基於 node，所以首先要安裝node環境

2.npm

包管理工具

環境配置請參考本站對應安裝教程

快速開始

1. 創建並進入一個新目錄

   mkdir vuepress-starter && cd vuepress-starter
   

2. 使用你喜歡的包管理器進行初始化

   yarn init # npm init
   

3. 將 VuePress 安裝為本地依賴

   我們已經不再推薦全局安裝 VuePress

   yarn add -D vuepress # npm install -D vuepress
   

   注意

   如果你的現有項目依賴了 webpack 3.x，我們推薦使用 Yarn (opens new window)而不是 npm 來安裝 VuePress。因為在這種情形下，npm 會生成錯誤的依賴樹。

4. 創建你的第一篇文檔

   mkdir docs && echo '# Hello VuePress' > docs/README.md
   

5. 在 package.json 中添加一些 scripts(opens new window)

   這一步驟是可選的，但我們推薦你完成它。在下文中，我們會默認這些 scripts 已經被添加。

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

6. 在本地啟動服務器

   yarn docs:dev # npm run docs:dev
   

   VuePress 會在 http://localhost:8080 (opens new window)啟動一個熱重載的開發服務器。

主題安裝

1. 推薦主題

   reco：https://vuepress-theme-reco.recoluan.com/

   Vdoing：https://doc.xugaoyi.com/vuepress-theme-vdoing-doc/

2. 安裝

   npm install vuepress-theme-vdoing -D
   

3. 引用

   // config.js
   module.exports = {
     theme: 'vdoing'
   }
   

4. 在本地啟動服務器

   yarn docs:dev # npm run docs:dev