使用vuepress 搭建团队文档

前言

最近收到首席执行官的任务,说要搞一个团队文档,因为团队也从之前的4大金刚,开始变多了,所以需要一些文档来告诉后来的小伙伴,百度发现vuepress还不错,就喜欢这种简单无脑的,可以cv的,搞起来
官网 关于为啥选1.0版本的一些考虑
因为我在选型的时候,发现官网还是beta版本,so,我觉得选择1.0 的靠谱点
基本概念 官网的目录介绍
使用vuepress 搭建团队文档
文章图片

具体目录功能
【使用vuepress 搭建团队文档】使用vuepress 搭建团队文档
文章图片

路由的跳转方式
使用vuepress 搭建团队文档
文章图片

具体步骤 创建项目(直接按照官网的撸起来)
创建项目第一步 使用vuepress 搭建团队文档
文章图片

创建项目第二步 使用vuepress 搭建团队文档
文章图片

我把打包命令改成公司统一的方式,具体改不改,看你的需要 使用vuepress 搭建团队文档
文章图片

当前vuepress信息 使用vuepress 搭建团队文档
文章图片

创建侧栏 新建config.js 文件,添加侧栏文件
使用vuepress 搭建团队文档
文章图片

成功生成侧栏
使用vuepress 搭建团队文档
文章图片

多层级目录如何创建?
使用組件:官网 新建vue文件
使用vuepress 搭建团队文档
文章图片

使用组件
组件生效,, 如果你的写了html内容但是没有生效,请检查一下标签的闭合是否有问题,血的教训!!!
使用vuepress 搭建团队文档
文章图片

使用组件成功
使用vuepress 搭建团队文档
文章图片

引入elment-ui 官网说了,要这么做
npm install element-ui

使用vuepress 搭建团队文档
文章图片

修改 enhanceApp.js
修改enhanceApp 文件,添加如下代码
import Element from 'element-ui'; ?import 'element-ui/lib/theme-chalk/index.css'; ?export default ({ Vue, options, router }) => {Vue.use(Element); };

使用vuepress 搭建团队文档
文章图片

element ui 生效图 使用vuepress 搭建团队文档
文章图片

使用vuepress 搭建团队文档
文章图片

重启项目,发现报错
报错信息:Uncaught Error: Cannot find module 'core-js/library/fn/object/assign'
使用vuepress 搭建团队文档
文章图片

报错原因
  • 一看core.js报错,想想应该是版本不兼容的问题,之前被坑的太多了
  • 百度发现也是这个原因
使用vuepress 搭建团队文档
文章图片

解决办法
  • ?yarn add async-validator@1.11.5 或者 npm install async-validator@1.11.5 搞定
  • 安装完毕,重启搞定
参考资料
  • vuepress加载element-ui时报错

    推荐阅读