0

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

我读到 enhanceApp.js 是要走的路，所以我尝试将 JS 文件附加到 Vue 对象，但它不起作用。任何帮助表示赞赏！

这是enhancedApp.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，而不必在两个组件中都引用它。

4

1 回答 1

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
}
于 2018-12-19T13:12:55.920 回答