使用VuePress搭建Element的组件库文档
呛再首 12/31/2022 技巧
# 使用VuePress搭建属于自己的组件库文档
日常开发中，我们使用 element-ui、vant-ui、Ant Design 等组件库，都因为其具备完善的文档，使得我们参照文档开发起来能够得心应手，那么如果我们想搭建自己的组件库文档该怎么做呢？
今天我们就利用 VuePress 来搭建个属于自己的组件库文档
# 安装element-ui
npm install element-ui
1
# 修改 enhanceApp.js
在 docs/.vuepress/enhanceApp.js（没有文件的则新建） 添加
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
export default ({ Vue}) => {
Vue.use(Element);
};
1
2
3
4
5
6
2
3
4
5
6
# 安装 vuepress-plugin-demo-container
npm i vuepress-plugin-demo-container --save-dev
1
虽然 VuePress 支持在 markdown 里直接写 vue 代码,但是我们可能需要写两份同样的代码，一份示例，一份展示，而使用此插件可以很好地做到不光有示例，还有展示示例代码
语法及使用文档点此查看 (opens new window)
# 使用自定义 vue 组件
创建目录"docs/.vuepress/components"
components 文件夹下新建 EllipsisTooltip.vue，这里我以二次封装 el-tooltip 的组件为例
<template>
<el-tooltip :effect="dark" :content="text" :disabled="disableTip" :placement="placement">
<div class="ellipsis" @mouseover="onMouseOver">
<span ref="ellipsis" :style="{color:color}" class="text">{{text}}</span>
</div>
</el-tooltip>
</template>
<script>
export default {
name: 'EllipsisTooltip',
props: {
text: { type: String, default: '' },
placement: { type: String, default: 'top-start' },
effect: { type: String, default: 'dark' },
color:String
},
data() {
return {
disableTip: false,
}
},
methods: {
onMouseOver() {
let parentWidth = this.$refs['ellipsis'].parentNode.offsetWidth
let contentWidth = this.$refs['ellipsis'].offsetWidth
this.disableTip = contentWidth <= parentWidth
},
},
}
</script>
<style scoped lang="css">
.ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
因为Vuepress可以自动识别components里面的组件并注册，所以我们的自定义组件写完后，就可以在md文档按照组件名字直接使用
# 引用自定义组件并编写组件案例
# 使用
::: demo
```vue
<div style="width:105px">
<EllipsisTooltip text="这是一段用来做组件示例的文字"></EllipsisTooltip>
</div>
\```
:::
1
2
3
4
5
6
7
2
3
4
5
6
7
# 案例
这是一段用来做组件示例的文字
Copy
这样，你就大功告成啦
