Question

有人可以向我解释如何将内部的“ commonFunction.js”文件导入新的Vue SPA并调用其中的每个函数吗？

最近2天，我花了很多时间来阅读导入，需求，创建脚本负载，将.JS文件添加到index.html等，但是根本没有任何作用。

我的Vue应用程序中有很多组件，并且我们有很多功能可以根据许多规则处理数据，但是我遇到了第一个障碍。

我基本上想将commonFunctions.js文件加载到内存中，并且让许多组件访问该导入的.js文件中的许多函数和方法。

我设法用一个简单的方法运行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")
    }
}

}

在main.js上，我有以下一行，我相信该行已导入上述.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>

将自定义jQuery库导入Vue SPA

0 个答案: