VuePress由两部分组成：
1、一个以 Vue 驱动的主题系统的简约静态网站生成工具
2、为编写技术文档而优化的默认主题
它是为了支持 Vue 子项目的文档需求而创建的，本文主要介绍脱离Vue项目之外的文档（博客）创建。
首先来张效果图
全局安装
如果没有vue项目或者你独立于vue项目下创建文档，要先全局安装vuepress，基于项目的安装，我会在下篇博客里更新：
npm install -g vuepress
创建目录&文件
mkdir blogs
cd blogs
//创建一个README.md
echo '# Hello VuePress' > README.md
//创建一个.vuepress 目录
mkdir .vuepress //只能通过命令行创建
//默认情况下，vuepress都会到这个页面里找相应的配置，比如config文件，components文件等等
//所以我们把config文件和components文件创建好
cd .vuepress
mkdir components
touch config.js
touch override.styl
在components里添加一个Category.vue，因为我在首页用到了自定义组件Category，代码如下
<template>
<div class="category">
<div class="com-tit">
基础必备 <span>→代码是写给人看的，顺便给机器运行→</span>
</div>
<div class="c-wrap">
<a v-for="(item,index) in baseArr" :href="item.file" target="_blank">
<h1>{{item.title}}</h1>
</a>
</div>
<div class="com-tit">
中级进阶 <span>→学习，是为了变成更好的自己， 将来的你，一定会感谢现在努力的自己！→</span>
</div>
<div class="c-wrap">
<a v-for="(item,index) in uponArr" :href="item.file" target="_blank">
<h1>{{item.title}}</h1>
</a>
</div>
</div>
</template>
<script>
export default {
data () {
return {
baseArr:[
{title:'HTML',file:'html'},
{title:'CSS',file:'css'},
{title:'JavaScript',file:'javascript'},
],
uponArr:[
{title:'ES6',file:'es6'},
{title:'TypeScript',file:'typescript'},
{title:'WebPack',file:'webpack'},
{title:'Electron',file:'electron'},
{title:'IOS',file:'ios'},
{title:'Android',file:'android'},
]
}
}
}
</script>
<style @scope>
.com-tit{font-size: 1.8rem;}
.com-tit span{font-size: 1rem;}
.category{border-top: 1px solid #eaecef;padding: 1.2rem 0;margin-top: 2.5rem;}
.c-wrap{display: flex;flex-wrap: wrap; align-items: flex-start;align-content: stretch;justify-content: space-between;}
.c-wrap a{display: block;flex-grow: 1;flex-basis: 30%;max-width: 30%;background:#ff4341;color: #fff;text-align: center; height:6rem;margin: 1rem 0 1.5rem 0;}
</style>
在根目录的README.md下设置
---
---
home: true
actionText: 前往 →
actionLink: /vuejs/
---
<!-- 引用自定义组件 -->
<Category/>
设置配置文件
vuepress会到.vuepress里面读取config.js里面的自定义配置，我的配置如下：
module.exports = {
title:'暖暖的风儿的博客',
description:'你若盛开，清风自来',
port:"8888",
themeConfig: {
//menu栏
nav: [
{ text: '主页', link: '/' },
{ text: 'Vue全家桶',
items:[
{ text: 'Vue基础', link: '/vuejs/base' },
{ text: 'VueRouter', link: '/vuejs/vuerouter'},
{ text: 'Vuex', link: '/vuejs/vuex'},
{ text: 'ElectronVue', link: '/vuejs/electron'},
{ text: 'Vue源码', link: '/vuejs/scode'}
]
},
{ text: 'NodeJS',
items:[
{ text: 'NodeJS基础', link: '/nodejs/base' },
{ text: 'Express', link: '/nodejs/express'},
{ text: 'Koa', link: '/nodejs/koa'}
]
},
{ text: 'React',
items:[
{ text: 'React基础', link: '/react/base' },
{ text: 'ReactNative', link: '/react/reactnative'},
{ text: 'React高级', link: '/react/gao'}
]
},
{ text: '技术前沿',
items:[
{ text: 'NodeJS基础', link: '/nodejs/base' },
{ text: 'Express', link: '/nodejs/express'},
{ text: 'Koa', link: '/nodejs/koa'}
]
},
{ text: '关于我',
items:[
{ text: 'NodeJS基础', link: '/nodejs/base' },
{ text: 'Express', link: '/nodejs/express'},
{ text: 'Koa', link: '/nodejs/koa'}
]
}
],
sidebar:{
'/vuejs/':[{
title:'menu1',
collapsable: false,
children:[
]
},{
title:'menu2',
collapsable: false,
children:[
]
}]
},
//搜索
search: true,
searchMaxSuggestions: 10,
}
}
覆盖样式
.vuepress 下面的override.styl可以全局覆盖样式
.nav-links a{font-size:1rem;font-weight:bold;line-height:2rem;padding:0 2rem;}
.home .hero h1{font-weight:normal;}
.nav-item > a:not(.external):hover, .nav-item > a:not(.external).router-link-active{border-color:#ff4341;}
.home .hero .action-button,.home .hero .action-button:hover{background-color:#ff4341;border-bottom:1px solid #ff4341;}
.home .hero .description{color:#ff4341;font-size:1.8rem;}
a,.page-nav .next,
.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active{color: #ff4341;}
.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after{border-left: 5px solid #ff4341;}
a.sidebar-link.active,a.sidebar-link:hover{color: #ff4341;border-left-color: #ff4341;}
.custom-block.tip{border-color: #ff4341;}
启动项目
//在浏览器里输入地址即可查看
vuepress dev
具体代码参见git：https://github.com/wjhcc2018/vuepress-blogs
注意事项： *创建一个目录后，必须在其根目录下创建一个README.md，否则sidebar显示不出来 *README.md里面的 一级标题会生成一级目录，二级标题会生成二级目录
参考文档： https://github.com/vuejs/vuepress
