快速上手 #

在开始之前,推荐先熟知 Ant Design Vue(opens new window) 以及 VuePress(opens new window) 的基本使用,并正确安装和配置了 Node.js v8.9 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的基本知识,并且已经完全熟知了 Ant Design Vue 的使用以及 VuePress 的正确开发方式。

安装主题 #

使用 yarn 安装 AntDocs 主题:

yarn add vuepress-theme-antdocs

或者使用 npm 安装它:

npm i vuepress-theme-antdocs

如果你的网络环境不佳,推荐使用 cnpm(opens new window)

需要指出的是,主题已经内置 active-header-links/last-updated/nprogress/search,所以并不需要在你的项目中安装那些依赖。至于 back-to-top 插件,主题并没安装它,而是采用了 Ant Design Vue 中的组件。

引用主题 #

打开 .vuepress/config.js 文件,然后在合适位置引用它:

module.exports = {
  ...
  theme: 'antdocs',
  ...
}

如果你对 VuePress 主题配置不是很了解,请点这里:使用主题(opens new window)

配置完毕后,你就可以直接 yarn run docs:devnpm run docs:dev 查看效果。

运行前请确认你的项目已安装 VuePress 依赖,而不是直接使用全局 VuePress 依赖。(作者的项目曾因为直接使用全局 VuePress 依赖,导致 back-to-top 插件无法正常显示,然后项目里单独安装 VuePress 依赖后才得以解决。)

效果预览 #

上次更新: 10/7/2020, 8:49:29 AM