Vdoing 适配插件研究
# 插件研究
Vuepress 的插件非常多， 最简单的办法是直接去 Npm 官网搜索 Vuepress-plugin 即可搜索到专用插件，带有 Vuepress 前缀的插件都是可以拆封即用的
只需在输入相应代码如 npm 官网右上角的安装代码
npm install @renovamen/vuepress-plugin-mermaid
1
1
随后在 config.js/config.ts 文件中的 plugins 部分添加以下代码
module.exports = {
plugins: [
// .....
// .....
// 只需要加入这部分即可，上面是原文档中有的，ts 和 js 在引入插件的方式上都是一样的
[
'@renovamen/vuepress-plugin-mermaid',
],
//
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Vdoing 插件推荐
经过测试，不知是不是因为 vdoing 采用的 vuepress 版本比较老，所以有好几个插件不兼容
目前兼容的插件如下:
# npm 安装代码
npm install @renovamen/vuepress-plugin-mermaid
1
2
2
1
2
2
配置方法如上文
使用方法:
```mermaidjs //这个插件必须要在 mermaid 后加 js 才可以渲染
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
```
1
2
3
4
5
6
7
2
3
4
5
6
7
1
2
3
4
5
6
7
2
3
4
5
6
7
# 不兼容的插件
不兼容特指 Vdoing 主题，原因主要是因为版本问题, 因为有部分新插件是直接适配的 Vuepress 2.0 版本
- VuePress Plugin for mermaid.js (opens new window) 这个因为更新是在最近一个月更新的，所以是用不了大概率是不适配1.0版本的网页了
- vuepress-plugin-md-enhance V2版本 (opens new window) 这个插件的V1版本是可用的，npm代码区别是
# V2版本
npm i -D vuepress-plugin-md-enhance@next
1
2
2
1
2
2
# V1版本
npm i -D vuepress-plugin-md-enhance
1
2
2
1
2
2
# 插件收集
# V1 Vue
在线编辑 (opens new window)
最近编辑时间: 2024/01/13 17:33:49