vuepress侧边栏配置_VuePress快速踩坑⼩结
最近有个开源项⽬⾮常⽕，那就是尤⼩右开发的 VuePress，VuePress 可以让您⾮常⽅便的在 Markdown ⽂档中编写 Vue 代码，并且VuePress 对编译后的 HTML ⽂件做了⼀些针对搜索引擎的优化。另外 VuePress 针对 Markdown ⽂件做了⼀些扩展使其功能更加强⼤，本⽂将围绕搭建⼀个 Github 的静态博客展开。
为项⽬加⼊ VuePress
第⼀步为您的项⽬安装 VuePress，如果您的项⽬代码中并没有 package.json⽂件，请先执⾏ npm init。
npm install -D vuepress // 或者 yarn add -D vuepress
// 在项⽬根⽬录下新加 docs ⽂件夹
mkdir docs
// 新建⼀个 Markdown ⽂件
echo "# Hello VuePress!" > docs/README.md
第⼆步在 package.json 中加⼊这些脚本，并运⾏。
// package.json
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
// 本地运⾏⽂档
npm run docs:dev
// 编译打包⽣产静态 HTML ⽂件
npm run docs:build
VuePress 对 Markdown 做了⼀些扩展，使得我们可以在 Markdown ⽂件中使⽤ YAML 语法，VuePress 使⽤ ---来隔离 Markdown 语法。
---
// 该语法表⽰使⽤当前页⾯标题⾃动⽣成侧边栏
sidebar: auto
---
VuePress 基础配置
通过 VuePress 配置⽂件我们可以使⽤⼀些⾃定义的功能，譬如添加侧边栏，添加导航栏等。⾸先在 docs ⽬录下新建⼀个 .vuepress⽬录，并在该⽬录下⽅新建 config.js。
VuePress 默认将⽂件打包在 .vuepress/dist⽬录下，我们可以通过 dest属性修改⽂件输出⽬录，例如将⽂件输出在项⽬根⽬录下的 dist ⽂件夹中。
通过设置 repo属性，VuePress 会在导航栏中添加⼀个 Github 仓库的链接。
在 VuePress 中通过设置 title属性来设置⽹站的标题，它将会被⽤作所有页⾯标题的前缀，在默认主题下，它将应⽤在导航栏上。
在使⽤ VuePress 编写博客并发布到 Github pages 的时候，我们可能会遇到下图所显⽰的问题，页⾯已经有了，但是样式和 js 没有加载成功。我们可以通过配置 base 属性来解决这个问题， base 属性的默认值是 /。假如您准备将代码部署到 taoxusheng.github.io/mt-blog/ , 那么 base属性就应该被设置成 /mt-blog/。注意：base 属性的值总是以 / 开始并以 /结束。
// dcos/.vuepress/config.js
title: 'my-blog', // 设置⽹站标题
dest: './dist'， // 设置输出⽬录
base: '/mt-blog/'，// 设置站点根路径
repo:
'github/TaoXuSheng/mt-blog' // 添加 github 链接
}
导航栏与侧边栏
在 VuePress 中如果想要为您的⽹站添加导航栏，可以通过设置 themeConfig.nav 来添加导航链接，通过设置 themeConfig.sidebar 属性来添加侧边栏。如果您的导航是⼀个下拉列表，可以通过 items 属性来设置。
// dcos/.vuepress/config.js
themeConfig: {
// 添加导航栏
nav: [
{ text: 'vue', link: '/' },
{ text: 'css', link: '/blog/' },
{ text: 'js', link: '/zhihu/' },
{
text: 'github',
// 这⾥是下拉列表展现形式。
items: [
{ text: 'focus-outside', link: 'github/TaoXuSheng/focus-outside' },
{ text: 'stylus-converter', link: 'github/TaoXuSheng/stylus-converter' },
]
}
],
// 为以下路由添加侧边栏
sidebar: ['/', '/git', '/vue']
}
}
有些时候我们可能需要⼀个多级侧边栏，例如⼀个博客系统，将⼀些类似的⽂章放在相同的⽬录下⽅，我们希望为这些⽬录的所有⽂件都添加侧边栏，就像下⾯这样的⼀个⽬录。
docs
├── README.md
├── vue
│ ├─ README.md
│ ├─ one.md
│ └─ two.md
└── css
├─ README.md
├─ three.md
└─ four.md
对于多级⽬录的侧边栏，我们需要⽤使⽤对象描述的写法，下⾯的 /git/ 表⽰在 git ⽬录，默认指向 /git/README.md ⽂件。
// dcos/.vuepress/config.js
themeConfig: {
sidebar: {
'/vue/': [
'one',
'two'
],
'/css/': [
'three',
'four'
]
}
}
}
在 VuePress 中注册组件
在 VuePress 中编写 Vue 代码，和我们通常的编写单⽂件的⽅式⼀致，有些时候我们有可能需要使⽤ Vue 的 UI 组件库。例如Element，Mint等，通常我们在项⽬中使⽤这些 UI 组件库的时候，我们都会在 main.js 或 botostrap.js ⽂件中统⼀注册。好在VuePress 中也⽀持这种功能，我们可以通过创建⼀个 .vuepress/enhanceApp.js ⽂件来做⼀些应⽤级别的配置，这个⽂件 exprot default ⼀个钩⼦函数，在这个钩⼦中你可以做⼀些特殊处理，例如添加全局路由钩⼦，注册外部组件库。
// .vuepress/enhanceApp.js
// 全局注册 Element 组件库
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default ({
Vue,
options,
router
}) => {
Vue.use(Element)
}
在 Vue 正常开发中，有些时候我们可能会需要做⼀些⾃定义的组件，在 VuePress 中我们可以在.vuepress/components⽬录中编写我们的⾃定义组件，VuePress 在编译时遍历该⽬录中所有的 *.vue⽂件，并见它们注册为全局组件。
// 注册⼀个⾃定义组件
// docs/.vuepress/components/hello.vue
Hello VuePress Demojs导航栏下拉菜单
这样我们在 Markdown ⽂件编写 Vue 代码的时候就不需要注册注册这些组件，边可以直接在 Markdown 中使⽤了。
// docs/.vuepress/vue/README.md
{{ msg }}
button
export default {
data () {
return {
msg: 'Hello VuePress!'
}
}
}
部署到 Github pages
当我们将⽂档写好后就到了我们最关⼼的地⽅了，怎么将打包后的代码推送到远程仓库的 gh-pages 分⽀上，⽹上应该有很多⽂章描述怎么做，但是很多⽅法⽐较⿇烦，还好有⼯具已经为我们解决了这个⿇烦了。
// 1.下载 gh-pages 包
npm install -D gh-pages
// 2\. 在 package.json ⽂件上添加脚本命令
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
// 上⾯我修改了 VuePress 的输出⽬录，所以您如果没有修改 .vuepress/config.js
// 的 dest 属性，应该将这⾥的 dist 改为 .vuepress/dist
"deploy": "gh-pages -d dist",
"deploy:build": "npm run docs:build && gh-pages -d dist"
}
// 3\. 打包并推送到 gh-pages 分⽀
npm run deploy:build
总结
相⽐较 Hexo ⽽⾔ VuePress 上⼿更加容易，功能也更强⼤，例如在 VuePress 可以注册⾃定义组件，⽽且 VuePress 中编写 Vue 和平时⼀样学习成本⼏乎为零。所以如果您正在开源⼀款 Vue 相关的库或是其他项⽬，您都可以使⽤ VuePress 作为您的⽂档编辑⼯具。虽然并没有完全将 VuePress 内容讲完，学完该篇⽂章相信你可以对 VuePress 有个⼤概的了解，您⾄少可以快速搭建⼀个博客，如果您想对VuePress 有更多了解，请参考Vuepress 中⽂ API。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。