'base/test1',
'base/test2',
'base/test3',
'base/test4',
] },
{
title: '可视化组件',
collapsable: true,
children: [
] },
{
title: '工具类组件',
collapsable: true,
children: [
] },
{
title: '方法类函数',
collapsable: true,
children: [
] }
],
'/knowledge/': [
{
title: 'CSS知识库',
collapsable: false,
children: [
] },
{
title: 'JS知识库',
collapsable: false,
children: [
] },
{
title: 'node知识库',
collapsable: false,
children: [
] },
{
title: 'vue知识库',
collapsable: false,
children: [
] }
] }
}
}
主题配置部分：在.vuepress/override.styl修改样式：
$accentColor = #3EB9C8 // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色
// 代码库重置
.content pre{ margin: 0!important;}（3）增加其它扩展插件
插件npm安装：element-ui，vue-echarts，vue-highlight。。
在.vuepress/enhanceApp.js引入：
/**
* 扩展 VuePress 应用
*/
import VueHighlightJS from 'vue-highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueECharts from 'vue-echarts' //注册图表import './public/css/index.css' //组件css文件
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router, // 当前应用的路由实例
siteData // 站点元数据
}) => {
// ...做一些其他的应用级别的优化
Vue.use(VueHighlightJS)
Vue.use(Element)
Vue.component('chart', VueECharts)
}
（4）Markdown 拓展
调用别人写好的轮子：https://www.npmjs.com/package/vue-highlight.js
<highlight-code slot="codeText" lang="vue">
<template>
<div class="demo-button">
<div>
<dt-button>默认按钮</dt-button>
<dt-button type="primary">主要按钮</dt-button>
<dt-button type="success">成功按钮</dt-button>
<dt-button type="info">信息按钮</dt-button>
<dt-button type="warning">警告按钮</dt-button>
<dt-button type="danger">危险按钮</dt-button>
</div>
</template>
</highlight-code>
