怎么使用vuepress写插件
wǎng luò shí huāng 2021-04-06
笔记
vuepress插件
- 理清怎么去写vuepress插件的方法。
# vuepress插件的写法
- 就如vuepress官网所说，插件分为4种。https://vuepress.vuejs.org/zh/plugin/#样例 (opens new window)
- 最常见的有2种。
# 最常见插件：全局性的ui插件
- 插件引入之后，插件会在全局生效。
- 参考自己写的插件：https://github.com/akaileyouyou/allNote/tree/master/docs/.vuepress/plugins/musicPlayer (opens new window)
- 主要核心有3个文件
- 第一个：入口文件，vuepress的config.js里引入组插件的时候就是引入插件的入口文件，一般命名为index.js
- 这个文件返回一个对象，对象里返回什么数据参考https://vuepress.vuejs.org/zh/plugin/option-api.html (opens new window)
- 下面的参数context有什么作用，参考https://vuepress.vuejs.org/zh/plugin/context-api.html#ctx-isprod (opens new window)
- 第一个：入口文件，vuepress的config.js里引入组插件的时候就是引入插件的入口文件，一般命名为index.js
const { path } = require("@vuepress/shared-utils");
// global.navigator = {
// userAgent: 'node.js'
// };
module.exports = (options, context) => ({ // options参数，是从vuepres的配置文件config.js传递过来的
define() { // 第一种给vue文件传递数据的方法。
// const { icon, detailsStyle, visibilityHeight } = options
// console.log("myPPPPP:", options); // 证明有值
// console.log("myPPPPPcontext:", context.isProd); // 证明有值
return {
musicId: 402073804, //这一行必须有，与插件的初始化有关
musicName: options.myMusicName,
musicIndex: options.myMusicIndex,
playState: options.playState || false,
};
},
// define: { 第二种给vue文件传递数据的方法。
// myMusicId: options.myMusicId,
// myMusicName: options.myMusicName,
// },
name: "vuepress-plugin-musicPlayer",
enhanceAppFiles: [path.resolve(__dirname, "./bin/enhanceAppFile.js")],
globalUIComponents: "musicPlayer",
});
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
下面的代码给上面的options参数传递参数
// 这里vuepress的配置文件config.js里的部分内容。
[
require("../../plugins/musicPlayer/index"),
{
//下面的参数具体怎么确定？可以直接到音乐播放器去输入关键字决定
// 初始化播放哪一首歌曲：发现使用歌曲的id并不能准确定位到歌曲，所以使用歌曲的名字初始化
// 自己喜欢的歌名：《take me to your heart》《绝不会放过》
myMusicName: "绝不会放过", // 音乐搜索框里的字
myMusicIndex: 2, // 在下拉列表里选择第几个歌曲作为默认歌曲。
playState: false, // 音乐是否自动播放。默认是false。
},
],
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
第二个：enhanceAppFile.js
- 这个文件一般是给插件暴露几个参数使用。
import musicPlayer from './zw-player/player.vue'
export default ({ Vue }) => { // 暴露出的vue构造函数，让下面生成一个全局vue组件。
Vue.component('musicPlayer', musicPlayer)
}
1
2
3
4
5
2
3
4
5
第3个文件：vue文件，创建插件ui用的
- 参考https://github.com/akaileyouyou/allNote/blob/master/docs/.vuepress/plugins/musicPlayer/bin/zw-player/player.vue (opens new window)
- 可以直接使用上面的index.js传递进来的数据名称。
- 参考这里https://github.com/akaileyouyou/allNote/blob/master/docs/.vuepress/plugins/musicPlayer/bin/zw-player/player.vue#L130 (opens new window)到132行。
- 把这些数据绑定到vue组件里即可在不热组件里使用。
# 最常见的创建：只是页面的功能性插件，不包含ui部分
- 参考https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-active-header-links (opens new window)
- 只包含入口文件和其他js文件。
const { path } = require('@vuepress/shared-utils')
module.exports = (options) => ({ // 同上vuepress的配置文件config.js传递进来的数据。
clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js'), // 把参数传递給clientRootMixin.js直接使用
define: { // 使用webpack的define插件，给全局添加变量。
AHL_SIDEBAR_LINK_SELECTOR: options.sidebarLinkSelector || '.sidebar-link',
AHL_HEADER_ANCHOR_SELECTOR: options.headerAnchorSelector || '.header-anchor'
}
})
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
