如何让vuepress支持自定义组件和第三方组件/包?
背景:内部的ui组件库用vuepress来展示,除了展示基本的用法之外,希望也能让组件的内容渲染在页面上,跟知名开源ui组件库的文档效果相当
主要目标
- 支持自定义组件
- 支持第三方组件(因为有些自定义组件,依赖了第三方组件库)
1. 支持自定义组件
参考官网
https://vuepress.vuejs.org/zh/guide/using-vue.html#使用组件
所有在 .vuepress/components
中找到的 *.vue
文件将会自动地被注册为全局的异步组件,如:
.
└─ .vuepress
└─ components
├─ demo-1.vue
├─ OtherComponent.vue
└─ Foo
└─ Bar.vue
2. 支持第三方组件(因为有些自定义组件,依赖了第三方组件库)
这个问题在官网是找不到的,查阅资料,又有些坑
部分其他文章写法如下(此写法能支持element-ui,但笔者需要支持iview,换成iview的标准配置之后,页面白屏,也没报错,十分蛋疼。。)
增加一个 enhanceApp.js, 在.vuepress/ 目录下
.
└─ .vuepress
└─ components
└─ enhanceApp.js // 增加一个 enhanceApp.js, 在.vuepress/ 目录下
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default ({
Vue,
options,
router,
siteData
}) => {
// 使用element-ui
Vue.use(ElementUI)
}
实际上有更好的写法,并且能支持iview
同样增加一个 enhanceApp.js, 在.vuepress/ 目录下
.
└─ .vuepress
└─ components
└─ enhanceApp.js // 增加一个 enhanceApp.js, 在.vuepress/ 目录下
新写法:
import Vue from 'vue';
import VueRouter from 'vue-router';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(VueRouter);
Vue.use(ViewUI);
也支持element-ui
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
也支持其他第三方库(需提前 npm install xxx)
import Axios from 'axios'
console.log(Axios)
console.log(Axios.get)
当前版本:"vuepress": "^1.8.2"
码字不易,点赞鼓励!