关于vuepress
vuepress简介
官方网址:https://vuepress.vuejs.org/zh/
安装vuepress
// 创建项目,在项目根目录下安装
npm install -D vuepress
开始创建你的第一篇文档
// 在当前的目录下创建一个docs文件夹,在这个文件夹下创建一个README.md
mkdir docs && echo '# Hello VuePress' > docs/README.md
在 package.json 中添加一些 scripts(opens new window)
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
在本地启动服务器
npm run docs:dev
初始化组件库文档结构
设置首页
在docs根目录下的 README.md 就是首页
注意开始首页后,无论怎么配置侧边栏都不会显示,只有跳转了路由才会显示(大坑,查了好久)
设置侧边栏
在docs下创建.vuepress下创建config.js(主要配置)
module.exports = {
title: "山财",
description: "网站描述",
// 注入到当前页面的 HTML <head> 中的标签
head: [
['link', { rel: 'icon', href: '/favicon.ico' }], // 增加一个自定义的 favicon(网页标签的图标)
],
base: "/", // 这是部署到github相关的配置 下面会讲
// markdown: {
// lineNumbers: true, // 代码块显示行号
// },
// plugins: ["demo-container"],
themeConfig: {
displayAllHeaders: true, // 默认值:false
logo: "/logo.png",
nav: [
{ text: "Home", link: "/" },
// 可指定链接跳转模式:默认target: '_blank'新窗口打开,_self当前窗口打开
{ text: "百度", link: "https://www.baidu.com" },
{ text: "CSDN", link: "https://blog.csdn.net", target: "_blank" },
// 支持嵌套,形成下拉式的导航菜单
{
text: "语言",
ariaLabel: "Language Menu",
items: [
{ text: "中文", link: "/language/chinese/" },
{ text: "英文", link: "/components/demo" },
],
},
],
sidebar: {
'/componentsDocs/': [
"my-card"
],
'/react/': [
'',
"background"
],
// fallback 侧边栏被最后定义
'/': ['', 'vue', '/react/', '/componentsDocs/my-card'], //不能放在数组第一个,否则会导致右侧栏无法使用
},
// 左侧列表展开级数,默认是 1
sidebarDepth: 6
},
};
在docs下创建.vuepress下创建components文件同组件文件代码一样复制即可
最后,效果