vue框架中main.js 入口引入"模板.js" 中多个方法,以及调用方法_vue3在main中引入js文件并在其他页面调用-CSDN博客

本文链接：https://blog.csdn.net/LZDCGY/article/details/83821906

以计算器为案例

Calculator.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>
<--绑定Vue ,让Vue接管这块(<div id="app">)-->
<div id="app">
    <!--view视图-->
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>
    
    <button v-on:click="jisuan()">计算</button>
    <spn v-text="result"></spn>
</div>
</body>
<--
（进入资源管理器文件所在位置 Shift+鼠标右键 在此处打开命令窗口输入：webpack main.js build.js ）
 引入webpack打包 main.js 后的 **build.js**
-->
<script src="./build.js"></script>
</html>

模板.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
-->
<script src="./build.js"></script>

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

以计算器为案例

Calculator.html

模板.js ( 统称 )

main.js 入口

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

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