vue学习 --- webpack入门

webpack入门

使用vue.js开发大型应用需要使用webpack打包工具
webpack可以将js分模块开发，开发完成对各模块代码打包成一个统一的文件。
前端模块开发的思想和服务端模块开发的思想是一致的，有利于多人协助开发。

1 安装webpack

1.1 安装node.js

https://blog.csdn.net/weixin_43231352/article/details/88739016 见该文

1.2 安装NPM

安装node.js时已自动安装

1.3 安装webpack

见 https://blog.csdn.net/weixin_43231352/article/details/88739016

2 webpack 进行打包

GIF展示
在这里插入图片描述

2.1 准备工作

打包前准备
1.创建webpacktest文件夹
2.拷贝vue.js到文件夹下
3.拷贝vue-03.html到文件夹下
在这里插入图片描述
vue-03.html代码如下

	<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
    <!--引入js类库-->
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    {{name}}
    <input type="text" v-model="num1">+
    <input type="text" v-model="num2">
    <!--= {{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <span  v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>

</body>

<script>
    <!--编写  model  VM-->
    var VM = new Vue({
        el: '#app',
        data:{
            name: '加法运算',
            num1: 0,
            num2: 0,
            result: 0
        },
        methods:{
            change: function () {
              this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2);
            }
        }
    })

</script>

</html>

2.2 改造

第一步: 将方法抽离,在webpacktest目录下创建model01.js
在这里插入图片描述
第二步 : 将该方法导出,加入如下代码

第三步: 创建main.js 文件,并导入加法

第四步:剪切vue-03.html如下代码

第五步: 粘贴到 main.js

第六步: 注释到 vue-03.htnl 中的 vue.js导入代码,当然也可以删除,如下图
在这里插入图片描述
第七步:在main.js中导入 vue.js

第八步: 改造main.js中的代码,如下图

第九步 : 进入cmd 进行打包

第十步:将 build.js导入 vue-03.html