如何让vuepress支持自定义组件和第三方组件/包?

背景:内部的ui组件库用vuepress来展示,除了展示基本的用法之外,希望也能让组件的内容渲染在页面上,跟知名开源ui组件库的文档效果相当

主要目标

  1. 支持自定义组件
  2. 支持第三方组件(因为有些自定义组件,依赖了第三方组件库)

1. 支持自定义组件

参考官网
https://vuepress.vuejs.org/zh/guide/using-vue.html#使用组件

所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件,如:

  1. .
  2. └─ .vuepress
  3. └─ components
  4. ├─ demo-1.vue
  5. ├─ OtherComponent.vue
  6. └─ Foo
  7. └─ Bar.vue

2. 支持第三方组件(因为有些自定义组件,依赖了第三方组件库)

这个问题在官网是找不到的,查阅资料,又有些坑

部分其他文章写法如下(此写法能支持element-ui,但笔者需要支持iview,换成iview的标准配置之后,页面白屏,也没报错,十分蛋疼。。)

增加一个 enhanceApp.js, 在.vuepress/ 目录下

  1. .
  2. └─ .vuepress
  3. └─ components
  4. └─ enhanceApp.js // 增加一个 enhanceApp.js, 在.vuepress/ 目录下
  1. import ElementUI from 'element-ui'
  2. import 'element-ui/lib/theme-chalk/index.css'
  3. export default ({
  4. Vue,
  5. options,
  6. router,
  7. siteData
  8. }) => {
  9. // 使用element-ui
  10. Vue.use(ElementUI)
  11. }

实际上有更好的写法,并且能支持iview

同样增加一个 enhanceApp.js, 在.vuepress/ 目录下

  1. .
  2. └─ .vuepress
  3. └─ components
  4. └─ enhanceApp.js // 增加一个 enhanceApp.js, 在.vuepress/ 目录下

新写法:

  1. import Vue from 'vue';
  2. import VueRouter from 'vue-router';
  3. import ViewUI from 'view-design';
  4. import 'view-design/dist/styles/iview.css';
  5. Vue.use(VueRouter);
  6. Vue.use(ViewUI);

也支持element-ui

  1. import Vue from 'vue';
  2. import ElementUI from 'element-ui';
  3. import 'element-ui/lib/theme-chalk/index.css';
  4. Vue.use(ElementUI);

也支持其他第三方库(需提前 npm install xxx)

  1. import Axios from 'axios'
  2. console.log(Axios)
  3. console.log(Axios.get)

当前版本:"vuepress": "^1.8.2"


码字不易,点赞鼓励!