vuePress操作指南

微信扫一扫,分享到朋友圈

vuePress操作指南

vuePress 文档

vuePress 可以作为静态博客,也可以作为个人文档,也可以作为轻量级别的 wiki

相较于已经放弃开源的 gitbook ,目前 vuePress 显然更有优势,集成 vue 生态使其扩展性更强.

参考文档: vuePress官方文档

启动项目

npx vuepress dev docs

目录结构

参考文档: vuePress目录结构

配置文件

一个 VuePress 网站必要的配置文件是 .vuepress/config.js ,它应该导出一个 JavaScript 对象:

module.exports = {
title: 'Hello VuePress', // 网站标题
description: 'Just playing around' // 网站描述
}

参考文档: vuePress基本配置

侧边栏

使用数组形式,每一个 json 是一个栏目, children 是子栏,以此类推

themeConfig: {
sidebar: [
{
title: '侧边栏2', // 侧边栏文字
path: '/', // 可选的, 标题的跳转链接,应为绝对路径且必须存在
collapsable: true, // 可选的, 默认值是 true,是否默认展开
children: [{
title: '子侧边栏', // 必要的
path: '/test', // 可选的, 标题的跳转链接,应为绝对路径且必须存在
collapsable: true, // 可选的, 默认值是 true,
}
​
}, {
title: '子侧边栏2', // 必要的
path: '/test2', // 可选的, 标题的跳转链接,应为绝对路径且必须存在
collapsable: true, // 可选的, 默认值是 true,
}
​
}]
}
]
}

参考文档: vuePress侧边栏

搜索框

themeConfig: {
search: true, // 是否开启搜索栏
searchMaxSuggestions: 10, // 调整默认搜索框显示的搜索结果数量
}

参考文档: vuePress搜索框

最后更新时间

themeConfig: {
lastUpdated: true,  // 最后更新时间
}

参考文档: vuePress最后更新时间

自定义组件

所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件

components/Test.vue

<template>
<div @click="test">
<div>child</div>
</div>
</template>
<script>
export default {
name: `test1232`,
data() {
return {};
},
methods: {
test() {
console.log(`vue`)
},
},
};
</script>
<style lang="less">
.test {
color: #333;
width: 100px;
height: 100px;
background-color: pink;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.child {
color: blue;
}
}
</style>
​

md 使用 <Test/>

参考文档: vuePress自定义组件

引入第三方框架

element-ui

设置应用级别配置 .vuepress/enhanceApp.js

npm 安装 element-ui

记得,千万别用官方推荐的 yarn ,因为引用 element 会报各种异常错误,清空 node-modules 文件,使用 npm install ,重新编译就好了

可能是 window 上独有的问题

import { Button } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
​
export default ({
Vue, // VuePress 正在使用的 Vue 构造函数
options, // 附加到根实例的一些选项
router, // 当前应用的路由实例
siteData // 站点元数据
}) => {
Vue.use(Button);
}

正常使用即可

<template>
<div @click="test">
<el-button type="primary">主要按钮</el-button>
</div>
</template>

参考文档: vuePress应用级别的配置

END.

微信扫一扫,分享到朋友圈

vuePress操作指南

小程序ocr通过二进制上传识别出错openapi.ocr.vehicleLicense:fail media data missing

上一篇

觀察 EF Core 產生的 SQL 指令

下一篇

你也可能喜欢

vuePress操作指南

长按储存图像,分享给朋友