vuePress环境搭建
Bingo's Blog 2020-06-01 vue
# vuePress环境搭建
# 查看nodejs版本
注意:Node.js 版本 >= 8
node -v
# 全局安装
npm install -g vuepress
# 创建项目目录
mkdir vuepress-demo
cd vuepress-demo
# 初始化项目,建立并编辑 package.json
npm init -y
进入package.json,修改脚本内容
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
# 建立基本目录
vuepress-demo
├─package.json
├─docs
| ├─README.md
| ├─.vuepress
| | ├─config.js
| | ├─public
| | | └favicon.ico
# 修改配置文件 - config.js
module.exports = {
title: 'Hello VuePress',
description: 'Hello, my friend!',
head: [
['link', {
rel: 'icon',
href: `/favicon.ico`
}]
],
dest: './docs/.vuepress/dist',
ga: '',
evergreen: true,
}
# 修改README.md
VuePress 提供了对 YAML front matter 开箱即用的支持,我们可以模仿vuepress首页进行如下优化:
---
home: true
heroImage: /favicon.ico
actionText: 出发 →
actionLink: /guide/
features:
- title: 笔记感悟
details: 好记性不如烂笔头
- title: 持之以恒
details: 积少成多 持之以恒
- title: 总结再出发
details: 夯实基础 注重实践 总结经验
footer: Copyright © 2020-Bingo
---
# 运行项目
vuepress dev docs
运行上述代码,最后会提示预览的网址http://localhost:8080/(端口号可根据配置进行修改https://vuepress.vuejs.org/zh/config/#port) 打开网址,我们就可以看到如下画面:
# 配置导航
首先在docs目录下建立文件
每个文件夹下的README.md就是当前目录的内容;
让我们通过config.js文件配置相应导航
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{
text: 'Languages',
items: [
{ text: 'Chinese', link: '/language/chinese' },
{ text: 'English', link: '/language/english' }
]
},
{ text: 'External', link: 'https://www.baidu.com' },
]
}
为guide文件下的README.md添加内容:
## This is guide
content...
### title3
content...
### title3-01
## small title
content...
运行项目点击导航Guide,或是通过Home页点击“快速上手”会看到如下画面:
此时我们能够看到guide内容已成功显示,点击Lanuages能看到下拉,点击External会跳转到百度;
# 配置侧边栏
依旧在config.js文件下的themeConfig属性下添加:
sidebarDepth: 2,
sidebar: [
{
title: 'Guide',
collapsable: false,
children: ['/guide/']
}
]
注:通过 themeConfig.sidebarDepth 来修改它的行为。默认的深度是 1,它将提取到 h2 的标题,设置成 0 将会禁用标题(headers)链接,同时,最大的深度为 2,它将同时提取 h2 和 h3 标题。
配置好后,运行项目