网站成果样式
项目书写步骤
github地址:https://github.com/xuhuihui/dataCom
官网：http://caibaojian.com/vuepress/guide/getting-started.html
参考文章：https://www.jb51.net/article/156259.htm
前言：我先git clone官方github，运行查看完整效果。 再根据官网介绍和参考文章，结合完整的代码，自己一步步配置内容。最后，参考element的设计样式，修改并增加代码，形成一个平台组件库的网站。
（1）在已有项目中安装
# 安装为本地依赖项
npm install -D vuepress# 创建一个 docs 目录
mkdir docs
# 创建一个 markdown 文件
echo '# Hello VuePress' > docs/README.md
# 给package.json 添加一些 scripts 脚本：{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}# 运行项目
yarn run docs:dev
出现显示文档乱码问题，如图所示：
解决方式：修改md文件编码为UTF-8
改变md文件的内容如下：
---
home: true
actionText: 前往 →
actionLink: /baseComponents/
features:
- title: 布局类组件
details: 基本组件，为常用组件提供快速，可用的组件
- title: 可视化组件
details: 积累将数据可视化的业务组件
- title: 知识库
details: 积累前端相关的知识，涵盖 vue、react、koa2、nodejs 相关的知识点
---（2）配置文件
配置（参考链接：http://caibaojian.com/vuepress/config/） VuePress 站点的基本文件是
.vuepress/config.js，其中导出一个 JavaScript 对象：
module.exports = {
title: 'data Com', // 设置网站标题
description: 'Just for fun', //描述
dest: './dist', // 设置输出目录
port: 2233, //端口
themeConfig: { //主题配置
// 添加导航栏
nav: [
{ text: '主页', link: '/' }, // 导航条
{ text: '组件文档', link: '/baseComponents/' },
{ text: '知识库', link: '/knowledge/' },
{ text: 'github', // 这里是下拉列表展现形式。
items: [
{ text: 'focus-outside', link: 'https://github.com/TaoXuSheng/focus-outside' },
{ text: 'stylus-converter', link: 'https://github.com/TaoXuSheng/stylus-converter' },
] }
],
// 为以下路由添加侧边栏
sidebar:{
'/baseComponents/': [
{
title: '布局类组件',
collapsable: true,
children: [
