Question

我正在从事由前同事设置的Vuepress项目。我试图在根组件中引用我的自定义Javascript文件，以便它在全球范围内可用。我不想在每个组件中都引用它，因为那将是多余的，并且无法按预期工作。

我读过EnhanceApp.js是一种解决方法，因此我尝试将JS文件附加到Vue Object，但它不起作用。任何帮助表示赞赏！

这是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
}

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

1 个答案: