VUE+webpack打包入门

VUE+webpack打包入门

第一步：创建html界面
比如

<div id="app">
    <a v-bind:href="url">
    <input type="text" v-model="lovea"/> +
    <input type="text" v-model="loveb"/>=
    <span v-text="result"></span>
    <button v-on:click="change">整合</button>
    
</div>

第二步：创建js
比如

var pin = function (a, b) {
    return a+b;
}
var pinLove = function (a, b) {
    return a+b+"我爱你";
}
/*导出*/
module.exports.pin= pin;
module.exports.pinLove = pinLove ;
/*多个方法一起导出*/
// module.exports ={pin,pinLove };

第三步：创建入口主文件

/*导入第二步文件中导出的方法*/
var {pin} = require("feng.js")//ES6语法
/*如果你想导入多个，又不想一个一个导入*/
var {pin,pinLove} = require("feng.js")//ES6语法
/*导入VUE的核心文件，定义VUE模块*/
var Vue = require("../../js/vue.min.js")//具体文件路径自己修改

var VM = new Vue({
    el:'#app',//vm接管app区域的管理
    data:{
        result:0,
        lovea:"中",
        loveb:"国",
        url:'https://www.baidu.com',
    },
    methods:{
        change:function () {
            this.result = pin(this.lovea,this.loveb)
        }
    }
});

第四步 ： 打包主文件
切换到主文件目录下，执行webpack 要打包的文件 打包成功之后的文件名

第五步 ： 将打包成功的文件引入到html界面

<script src="/打包成功之后的文件名.js" ></script>

第六步：每一次改代码都很麻烦，欲知怎么不麻烦，请听下回分解