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

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

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

主要目标

1. 支持自定义组件
2. 支持第三方组件（因为有些自定义组件，依赖了第三方组件库）

1. 支持自定义组件

参考官网 vuepress.vuejs.org/zh/guide/us…

所有在 .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"

---

码字不易，点赞鼓励！