Импорт пользовательской библиотеки jQuery в Vue SPA - PullRequest
Новая
       7

Импорт пользовательской библиотеки jQuery в Vue SPA

0 голосов
/ 05 марта 2019

Может ли кто-нибудь объяснить мне, как я могу импортировать наш внутренний файл "commonFunction.js" в новый Vue SPA и вызывать каждую из этих функций?

Последние два дня я читал об импорте, require, создание скриптовой загрузки, добавление файла .JS в index.html и т. д., и т. д., и просто ничего не работает.

В нашем приложении Vue много компонентов, и у нас есть множество функцийкоторые обрабатывают данные на основе многих правил, но я застрял на первом препятствии.

Я в основном хочу загрузить файл commonFunctions.js в память и иметь много компонентов для доступа ко многим функциям и методам в импортированном .js.file.

Мне удалось запустить jQuery с помощью простого: 

const $ = require('jquery');
window.$ = $;

Советы действительно приветствуются!

Пример вызова функции: 

function formatPercent(number) {
   if (isNaN(number.value) === true) { return '-' }
   return isFinite(numberWithCommas(parseFloat(number.value, 2).toFixed(defaultDecimalRounding))) ? numberWithCommas(parseFloat(number.value, 2).toFixed(defaultDecimalRounding)) + '%' : '∞';

}

В качестве теста у меня есть файл с именем "commonFunctions.js" и следующее: 

module.exports = {
methods: {
    method: function () {
        alert("1")
    },
    otherMethod: function () {
        alert("2")
    }
}

} ​​

На моем основномУ меня есть следующая строка, которую я считаю, импортируетсявыше файл .js и присвоение его переменной myMethod 

var MyMethods = require('./commonFunctions.js');

И, наконец, в одном из моих методов на странице .vue, после того, как пользователь нажал кнопку, я хочу проверить, что все работаетсо следующим: 

<template>
<div class="home">
    <h1>{{ msg }}</h1>
    <p>Welcome to your new single-page application,, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p>
    <v-btn v-on:click="redraw">T1</v-btn>
    <v-btn v-on:click="redraw2">T2</v-btn>

</div>
</template>
<script>
    import { EventBus } from "../event-bus";
export default {
    name: 'Home',
    props: {
        msg: String
    },

    methods: {
        redraw: function () {

            let $ = window.$;
            EventBus.$emit("categories", [{ name: 'n1' }, { name: 'n2' }]);
            EventBus.$emit("tabledata", [{ name: 'n1', Y2013: 159, Y2014: 6.0, Y2015: 24, Y2016: 4.0, Y2017: 1 }]);
            $('body').css('background-color', 'grey');

            MyMethods.method

        },
        redraw2: function () {
            EventBus.$emit("categories", [{ name: 't3' }, { name: 't3' }]);
            EventBus.$emit("tabledata", [{ name: 't3', Y2013: 159, Y2014: 6.0, Y2015: 24, Y2016: 4.0, Y2017: 1 }]);
        }
    }
};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
...