VuePress 插件开发

发表于 阅读次数： 评论数： 本文字数： 507 阅读时长 ≈ 1 分钟

前言

博主已开发的插件

VuePress 官方插件

VuePress v1.x

VuePress v2.x

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>

参考资料