vue框架中main.js 入口 引入"模板.js" 中多个方法,以及调用方法

以计算器为案例

Calculator.html

    
    


<--绑定Vue ,让Vue接管这块(
)-->

    
    +
    
    
    计算
    


<--
（进入资源管理器文件所在位置 Shift+鼠标右键 在此处打开命令窗口输入：webpack main.js build.js ）
 引入webpack打包 main.js 后的 **build.js**
-->

模板.js ( 统称 )

var add = function (x, y) {
    return x + y;
};
var add2 = function (x, y, z) {
    return x + y + z;
};
module.exports = {add, add2};

main.js 想引用模板.就先要在模板中设置，导出模板代码。
导出代码：

//**单**个方法引用例子：
module.exports.add = add;
//**多**个方法引用例子
module.exports = {add, add2};

main.js 入口

//导入模板
//var {add2} 大括号里的内容与方法名一致，用哪个导入哪个（目前，我猜有更好的方法，但我目前还不知道）
var {add2} = require("./mode_01");
//导入vue.min.js
var Vue = require("./vue.min");
//定义的数据类型

new Vue({
    el: "#app",
    data: {
        num1: 1,
        num2: 1,
        result: 0,
    },
    methods: {
        jisuan: function () {
       // 在此处调用方法
            this.result = add2(Number.parseInt(this.num1), Number.parseInt(this.num2), Number.parseInt(this.num2));
        }
    }
});

main.js 入口引用方法注意三点：

1.模板最后要设置导出，main.js要设置导入模板

module.exports = {add, add2};

2.main.js导入模板哪个方法就用哪个模板中的方法名

var {add2} = require("./mode_01");

3.html页面中要引入打包后的js（我的是build.js）

<--
（进入资源管理器文件所在位置 Shift+鼠标右键 在此处打开命令窗口输入：webpack main.js build.js）
 引入webpack 打包后的js
-->