使用vuepress 搭建团队文档

前言

最近收到首席执行官的任务,说要搞一个团队文档,因为团队也从之前的4大金刚,开始变多了,所以需要一些文档来告诉后来的小伙伴,百度发现vuepress还不错,就喜欢这种简单无脑的,可以cv的,搞起来

官网

关于为啥选1.0版本的一些考虑

因为我在选型的时候,发现官网还是beta版本,so,我觉得选择1.0 的靠谱点

基本概念

官网的目录介绍

使用vuepress 搭建团队文档_第1张图片

具体目录功能

使用vuepress 搭建团队文档_第2张图片

路由的跳转方式

使用vuepress 搭建团队文档_第3张图片

具体步骤

创建项目(直接按照官网的撸起来

创建项目第一步

使用vuepress 搭建团队文档_第4张图片

创建项目第二步

使用vuepress 搭建团队文档_第5张图片

我把打包命令改成公司统一的方式,具体改不改,看你的需要

使用vuepress 搭建团队文档_第6张图片

当前vuepress信息

使用vuepress 搭建团队文档_第7张图片

创建侧栏

新建config.js 文件,添加侧栏文件

使用vuepress 搭建团队文档_第8张图片

成功生成侧栏

使用vuepress 搭建团队文档_第9张图片

多层级目录如何创建?

使用組件:官网

新建vue文件

使用vuepress 搭建团队文档_第10张图片

使用组件

组件生效,, 如果你的写了html内容但是没有生效,请检查一下标签的闭合是否有问题,血的教训!!!

使用vuepress 搭建团队文档_第11张图片

使用组件成功

使用vuepress 搭建团队文档_第12张图片

引入elment-ui

官网说了,要这么做

npm install element-ui

使用vuepress 搭建团队文档_第13张图片

修改 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 搭建团队文档_第14张图片

element ui 生效图

使用vuepress 搭建团队文档_第15张图片

使用vuepress 搭建团队文档_第16张图片

重启项目,发现报错

报错信息:Uncaught Error: Cannot find module 'core-js/library/fn/object/assign'

使用vuepress 搭建团队文档_第17张图片

报错原因

  • 一看core.js报错,想想应该是版本不兼容的问题,之前被坑的太多了
  • 百度发现也是这个原因

Uncaught Error: Cannot find module 'core-js/library/fn/object/assign'

解决办法

参考资料

你可能感兴趣的:(vuepress前端)