介绍一下vuepress
vuepress由两部分组成,第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
快速上手
在此不赘述,可以查看官网vuepress
踩坑记录
本着只是做一个技术文档的初衷,也不需要把网站做的多漂亮,因此只需要配置好默认主题就可以了。为什么用vuepress做这件事呢,主要是因为我的技术栈是vue,vuepress是基于vue的,在markdown中可以直接引vue组件,使用vue语法,特别方便,学习成本低。
编写文章的时候项目已经开发完了,写文章是用回忆的方式记录项目中的问题,难免遗漏一些,没有办法,下次尽量开发时同步记录文章。
关键点有以下几点:
默认主题配置
1.默认的主题提供了一个首页(Homepage)的布局 (用于 这个网站的主页)。想要使用它,需要在根级 README.md
的 YAML front matter 指定 home: true
2.多个侧边栏配置
module.exports = {
base: '/claus-ui-docs/',
title: 'Claus-UI',
description: 'claus-ui',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '指南', link: '/guide/guide' },
{ text: '组件', link: '/components/colorCard' },
{ text: '查看源码', link: 'https://gitee.com/clausliang/claus-ui-vue2' },
],
sidebar: {
'/guide/':[
{title: '指南', path:'guide'}
],
'/components/': [
{title: 'colorCard',path: 'colorCard'},
]
}
},
// 解决引入element报错问题
chainWebpack: config => {
config.resolve.alias.set('core-js/library/fn', 'core-js/features')
}
}
TypeError: Object(...) is not a function
这个错一开始很懵,不知道是怎么回事。后来发现是vue版本的问题,就是vuepress的稳定版1.x引用的vue是2.x版本,我引入了一个vue3搭建的组件库,就导致了这个报错。vue2和vue3不互相兼容。
cannot find moduule 'core-js/library/fn/object/assign'
在vuepress的项目中使用element方法:创建enhanceApp.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
export default ({ Vue, options, router }) => {
Vue.use(ElementUI);
}
安装使用element时报了这么一个错,原因是element引用的core-js和vuepress引用的core-js版本不一致导致的。修复方法:
// config.js
module.exports = {
...
// 解决引入element报错问题
chainWebpack: config => {
config.resolve.alias.set('core-js/library/fn', 'core-js/features')
}
}
打包发布
1.打包命令 yarn docs:build
2.发布到gitee pages
1.需要在config.js中配置base
module.exports = {
base: '/claus-ui-docs/',
...
}
部署目录是docs/.vuepress/dist