VuePress 完整使用教程

img

官网

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

环境

1.node

vuepress 基于 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