VuePress 插件开发

前言

博主开发的插件

官方插件源码

VuePress v1 插件开发

Vue 组件引入内部 JS 文件

第一步:在项目内定义 JS 文件,例如这里定义 loadResources.js 文件,同时通过 export 暴露 JS 函数:

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
// 引入Q
const Q = require('q');

/**
* 异步加载js文件
*
* @param url 导入js的url地址
* @param id script标签的id(必须唯一)
* @returns {*} export此函数方便全局调用
*/
export function asyncLoadJs(url, id) {
return Q.Promise((resovle, reject) => {
let srcArr = document.getElementsByTagName('script');
let hasLoaded = false;

for (let i = 0; i < srcArr.length; i++) {
hasLoaded = srcArr[i].id === id;
if (hasLoaded) {
document.getElementById(id).remove();
}
}

let script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.id = id;
document.body.appendChild(script);

script.onload = () => {
resovle();
};
script.onerror = () => {
reject();
}
})
}

第二步:在项目里定义 Vue 组件,例如这里定义 example.vue,同时通过 import 引入上面定义的 JS 文件即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div></div>
</template>

<script>
import { asyncLoadJs } from "../js/loadResources.js";
export default {
name: "example",
data() {
return {};
},
mounted() {
asyncLoadJs("https://www.example/js/example.js", "example");
},
};
</script>

<style lang="scss" scoped>
</style>

参考资料