如何在我的Vuepress项目中引用自定义Javascript文件，以便JS函数在全球范围内可用

Question

我正在进行一个Vuepress项目，该项目是由一位前同事设置的。我正在尝试在根组件中引用我的自定义Javascript文件，以便它在全局范围内可用。我不想在每个组件中都引用它，因为这是多余的，而且它不能按预期工作。

我读到enhanceApp.js是一种方法，所以我尝试将js文件附加到Vue对象，但它不起作用。感谢您的帮助！

这是enhanceApp.js

import HelpersPlugin from '../../src/js/helpers';
export default ({
Vue,
options,
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(HelpersPlugin);
}

这是src/js/helpers文件夹，其中包含accordion.js(我的自定义js文件(和index.js

index.js:

import AccordionHelper from './accordion';
export default { 
install: (Vue, options) => {
Vue.prototype.$helpers = {
accordion: AccordionHelper
}
}
}

accordion.js：(具有带DOM操作功能的普通js(

export default () => {
console.log("Hello");
//DOM manipulation JS
}

这是文件夹结构：

docs
-> .vuepress
- components
* Accordion.vue
* Buttons.vue
- theme
* Layout.vue
* SearchBox.vue
- config.js
- enhanceApp.js
-> accordion
- README.md
-> buttons
- README.md
src
-> js
- helpers
* accordion.js
* index.js

我希望在accordion.vue和Layout.vue中都使用accordion.js，而不必在两个组件中都引用它。

Answer 1

我相信这是共享常用JS函数的推荐方式。通过从Vuepress中弹出默认主题找到了这一点。

.vue文件：

<template>
<div v-if="canHelp()">Help is on the way</div>
</template>
<script>
import { canHelp } from './helpers'
export default {
methods: {
canHelp
}
}
</script>

helpers.js

export function canHelp () {
return true
}