vue获取文件绝对路径_vuePress搭建一个vue风格的技术文档/博客

vuePress文档

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

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

参考文档: vuePress官方文档

启动项目

npm installnpx 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 class="test" @click="test">
        <div class="child">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使用 

参考文档: 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 class="test" @click="test">
        <el-button type="primary">主要按钮</el-button>
    </div>
</template>

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

演示Demo

代码地址: vuePressDemo代码地址

END.