Как мне обратиться к пользовательскому файлу Javascript в моем проекте Vuepress, чтобы функции JS были доступны по всему миру? - PullRequest
Новая
       8

Как мне обратиться к пользовательскому файлу Javascript в моем проекте Vuepress, чтобы функции JS были доступны по всему миру?

0 голосов
/ 04 декабря 2018

Я работаю над проектом Vuepress, который был настроен бывшим коллегой.Я пытаюсь передать свой пользовательский файл Javascript в корневой компонент, чтобы он был доступен по всему миру.Я не хочу ссылаться на него в каждом компоненте, потому что это было бы излишним, и оно не работает должным образом.

Я прочитал, что файл EnhancedApp.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: (имеет простой JS с функциями манипулирования DOM) 

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.js как в Accordion.vue, так и в Layout.vue без необходимости ссылаться на него в обоих компонентах.

1 Ответ

0 голосов
/ 19 декабря 2018

Я считаю, что это рекомендуемый способ обмена общими функциями 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
}
...