Vue

一、ECMAScript6规范

ECMAScript就是javascript语言的规范
ES6是用得最多的javascript语言规范，被浏览器实现了

①申明变量

let和var的区别
相同点：var和let都是申明变量的
区别： let是申明块级的变量（简单理解就是在某个代码块中生效，离开该代码块就没有效果了，有点类似java中的局部变量）

var a = 2;
let b = 4;
console.debug(a,b);//打印成功
for(let i = 0;i<5;i++){
    console.debug(i);
}
//console.debug(i)打印失败

const也是用来申明变量的，使用const申明的变量就是一个常量
const修饰的变量，一旦被赋值就不能再进行更改

const c = 1;
//c = 3;不能再进行更改
console.debug(c)

②解构表达式

• 解构数组

<script type="text/javascript">
    let arr = ["你","好","啊"];
    //console.debug(arr[0],arr[1],arr[2]);//ES5方式
    //ES6方式 解构表达式取值，解构数组
    let [a,b,c] = arr;
    console.debug(a,b,c);
    //==========================================
    let p = {
        name:"古大师",
        age:30,
        sex:true
    }
    //ES6方式 解构表达式取值，解构对象
    function show({name,age,sex}) {
        console.debug(name,age,sex);
    }
    show(p);

    let {name,age,sex} = p;
    console.debug(name,age,sex);

</script>

const c = 1;
//c = 3;不能再进行更改
console.debug(c)

②解构表达式

• 解构数组

<script type="text/javascript">
    let arr = ["你","好","啊"];
    //console.debug(arr[0],arr[1],arr[2]);//ES5方式
    //ES6方式 解构表达式取值，解构数组
    let [a,b,c] = arr;
    console.debug(a,b,c);
</script>

• 解构对象

<script type="text/javascript">
    let p = {
        name:"古大师",
        age:30,
        sex:true
    }
    //ES6方式 解构表达式取值，解构对象
    function show({name,age,sex}) {
        console.debug(name,age,sex);
    }
    show(p);

    let {name,age,sex} = p;
    console.debug(name,age,sex);
</script>

③函数（箭头函数）

• 常规写法
• 箭头函数

	箭头函数this是属于当前创建环境this是一致的
    如果箭头函数外面还有函数，那箭头函数的this是和外层函数this一致，
    如果外层没有函数，该this就是window

• 最简写法

<script type="text/javascript">
    var p = {
        name:"古大师",
        age:44,
        show1:function (msg) {
            console.debug(msg);
            console.debug("我是以前的写法"+this.name+this.age);
        },
        show2:(msg)=>{//新的写法1  箭头函数this是属于当前创建环境this是一致的
            console.debug(msg);
            console.debug("我是箭头写法"+this.name+this.age);
            console.debug(this);//如果箭头函数外面还有函数，那箭头函数的this是和外层函数this一致，如果外层没有函数，该this就是window
        },
        show3(msg){
            console.debug(msg);
            console.debug("我是最简单的写法"+this.name+this.age);
        }
    }
    p.show1("show1");
    p.show2("show2");
    p.show3("show3");
</script>

④promise使用(了解)

<script type="text/javascript">
    const p = new Promise((resolve, reject) =>{
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功AAA！num:" + num)
        } else {
            reject("出错了BBB！num:" + num)
        }
    })//以后上面这坨代码我们都看不到的
    //以后我们的请求，有点类似于下面这种结构
    // 调用promise
    p.then(function (msg) {//如果调用成功执行该function函数中的内容
        console.log(msg);
    }).catch(function (msg) {//如果调用失败执行cat代码块中的内容提供
        console.log(msg);
    })
    /**
     * 伪代码以后发送ajax的写法：
     * this.axios.get(url,param).then(res=>{
     *
     * }).catch(res=>{
     *
     * })
     */
</script>

⑤模块化

模拟导出导入
将b中所有js导出到a.js中，到时要用a、b的js只需导入a.js即可
导出方式

• 一次导出一个
• 一次导出多个（导入时用{}）
• 默认导出(导入时随便取名)

a.js导出

//导出两个函数
/*
方式1
export const util = {
    show1(){
    },
    show2(){
    }
}*/
/*
方式2
const util = {
    show1(){
    },
    show2(){
    }
}
export util;
*/

//一次导出多个
var a = "hahaha";
var b = 30;
var c = {
    show3(){
    }
}
export {a,b,c};

//默认导出
export default {
    show4(){

    }
}

b.js导入

//导入util
//import util from "a";
//util.show();
//util.show2();

//一次导入多个
import {a,b,c} from "a";
console.debug(a);
console.debug(b);
c.show3();

//默认导入，名字随便取
import aaa from "a";
aaa.show4();

二、Vue认识与安装

①vue认识

vue他是一个基于双向绑定的前端框架
双向绑定：简单理解，数据一变界面就变，界面一变数据就变。

②MVC与MVVM

MVC
MVC强调责任分离思想=>各自做各自擅长之事

MVVM

③vue使用步骤

• 1.导入js库
• 准备数据
• 准备视图
• 渲染数据

④安装vue方案

• 1.原生导入(在浏览器上把vue的核心js下载到本地，再本地导入即可)
• 2.使用npm安装vue
  要使用npm安装，需要先安装npm(装nodejs就可以了，因为nodejs中自带npm工具)
  NPM相当于后台中maven，可以自己下载前端所需库文件等

npm安装vue步骤：

• 安装node,之后idea安装nodejs插件
  (命令提示符窗口 node -v和npm -v检查是否安装成功)
• 若ideaterminal窗口不识别命令，配置terminal窗口，重启idea
  
• 初始化 npm init -y(类似java中pom.xml文件)
  
• 安装vue插件(局部安装，当前项目能用)npm install/i vue
  

三、vue基础语法

注意事项：
胡须表达式{{xxx}}，只能在挂载的标签内取值
当你导入vue核心库后，该页面就会有一个内置对象叫Vue

el属性

el:主要使用用来挂载指定的dom
el支持挂载的选择器有：id选择器,类型选择器,标签选择器

从这个列子可以看出，虽然它支持三种选择器的挂载，但是每个选择器只能挂载一个dom
所以建议大家以后挂载dom的时候统一使用id挂载

<body>
    <!--准备dom节点-->
    <div id="app" class="app">
        {{msg}}
    </div>
    <div class="app">
        {{msg}}
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"我是类型选择器"
        }
    });
</script>

②data属性

data属性是专门用来准备数据的

<body>
    <!--准备dom节点-->
    <div id="app">
        {{msg}}=={{sex}}==={{num}}==={{person}}
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"dangdnagdang",
            sex:true,
            num:22,
            person:{
                name:"二狗强",
                age:11,
                sex:false,
                email:"sss@qq.com"
            }
        }
    })
    alert(vue.person.name);
</script>

③methods属性

当前vue实例中所有的方法都放在methods中

<body>
    <!--准备dom节点-->
    <div id="app">
        {{show("我是参数")}}<br>
        {{show2()}}
    </div>
</body>
<script type="text/javascript">
    /*
       methods:当前vue实例中所有的方法都放在methods中
    * */
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"测试",
            name:"西门吹雪",
            sex:true
        },
        methods:{
            show(msg){
                alert(msg);
                return "我是方法show";
            },
            show2(){
                return "姓名："+this.name+this.sex;
            }
        }
    });
    console.debug(vue.show("当当"));
    console.debug(vue.show2());                                         
</script>

④vue表达式

支持加减乘除和三目运算等
vue三目运算中认为false的有6个值： 0 null NaN undefined false “”
其它值全部为true

<body>
    <!--准备dom节点-->
    <div id="app">
        {{num1}}+{{num2}}={{num1+num2}}<br>
        {{num1}}-{{num2}}={{num1-num2}}<br>
        {{num1}}*{{num2}}={{num1*num2}}<br>
        {{num1}}/{{num2}}={{num1/num2}}<br>
        {{num1}}%{{num2}}={{num1%num2}}<br>
     <!--   vue三目运算中认为false的有6个值：  0 null  NaN  undefined   false  ""  其它值全部为true-->
     {{sex?"男":"女"}}
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            num1:20,
            num2:30,
            sex:-1
        }
    });
</script>

⑤vue-操作字符串

胡须表达式 它也是可以调用对等类型的方法

<body>
    <!--准备dom节点-->
    <div id="app">
      <!--  注意：胡须表达式 它也是可以调用对等类型的方法-->
        {{str}}=={{str.length}}=={{str.substring(3,5)}}=={{str.substr(3,5)}}
        =={{str.toUpperCase()}}
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           str:"HelloWorld"
        }
    });
</script>

四、vue指令

vue指令：vue指令就是带有v-前缀的特殊标签的属性
以下是vue常用属性：

①12_vue-v-text和v-html

• v-text：
  在指定的标签进行设置值，如果你设置的代码有html代码，它只会当成一个纯文本进行展示=>类似于js中的innerText
• v-html：
  在指定的标签进行设置值，如果你设置的代码有html代码，它是能被浏览器所 解析的=>类似于js中的innerHTML

<body>
    <!--准备dom节点-->
    <div id="app">
        <div v-text="text">
            AAAA
        </div>
        <div v-html="html">
            BBBB
        </div>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            text:"<h1>我是v-text</h1>",
            html:"<h2>我是v-html</h2>"
        }
    });
</script>

②v-for

循环迭代
在vue中循环迭代支持的元素：
整数 字符串 数组 对象

<body>
    <!--准备dom节点-->
    <div id="app">
        <ul>
            <!--如果是数字，默认从1开始取值-->
            <li v-for="(v,i) in num">{{v}}==索引{{i}}</li>
        </ul>
        <select>
            <!--如果是字符串从第一个字符开始取值-->
            <option v-for="(v,i) in str">{{v}}==索引{{i}}</option>
        </select>
        <select>
            <!--如果是数组从第一个元素开始取值-->
            <option v-for="(v,i) in hobbys">{{v}}==索引{{i}}</option>
        </select>
        <!--如果是对象，有三个参数，值，key，索引-->
        <span v-for="(v,k,a) in person">{{v}}=={{k}}=={{a}}</span>
    </div>
</body>
<script type="text/javascript">
    /*
    在vue中循环迭代支持的元素：
            整数     字符串   数组    对象
*/
    var vue = new Vue({
        el:"#app",
        data:{
           num:10,
           str:"helloworld",
           hobbys:["唱","跳","rap","篮球"],
           person:{
               name:"军军",
               email:"ss@qq.com",
               sex:true
           }
        }
    });
</script>

③v-bind

v-bind 主要用来绑定属性的

<body>
    <!--v-bind  主要用来绑定属性的-->
    <div id="app">
       <!-- 最原生的方式来获取图片-->
        <img src="image/google1.jpg" width="150px" height="150px" alt="没有该图片"/><br>
        <!--使用v-bind的方式来取图片  方式1-->
        <img v-bind:src="src" v-bind:width="width" v-bind:height="height" v-bind:alt="alt"/><br>
        <!--使用v-bind的方式来取图片（简写方式）  方式2-->
        <img :src="src" :width="width" :height="height" :alt="alt"/><br>
        <!--使用v-bind的方式来取图片（简写方式 直接绑定对象）  方式3-->
        <img v-bind="options"/><br>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            src:"image/google1.jpg",
            width:"150px",
            height:"150px",
            alt:"没有该图片",
            options:{
                src:"image/google2.jpg",
                width:"200px",
                height:"200px",
                alt:"没有该图片"
            }
        }
    });
</script>

④v-model

v-model 双向绑定
他支持的标签：input,select,textarea

<body>
    <div id="app">
        <input type="text" v-model="username"/>{{username}}<br>
        <input type="checkbox" v-model="hobbys" value="lq"/>篮球
        <input type="checkbox" v-model="hobbys" value="zq"/>足球
        <input type="checkbox" v-model="hobbys" value="ppq"/>乒乓球
        {{hobbys}}<br>

        <input type="radio" v-model="sex" value="1"/>男
        <input type="radio" v-model="sex" value="0"/>女
        {{sex}}<br>

        <select v-model="country">
            <option value="China">中国</option>
            <option value="Japan">日本</option>
            <option value="America">美国</option>
        </select>
        {{country}}<br>

        <textarea cols="30" rows="5" v-model="text" ></textarea>
        {{text}}
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           username:"古二娃",
           country:"China",
           hobbys:["lq","zq"],
           sex:1,
           text:"默认文本"
        }
    });
</script>

⑤v-if

判断指令，满足条件的标签才会显示

<body>
    <div id="app">
        <!--符合条件才会显示-->
        <span style="color: grey" v-if="age>60&&age<=100">老年人</span>
        <span style="color:yellow" v-else-if="age>30&&age<=60">中年人</span>
        <span style="color:blue" v-else-if="age>10&&age<=30">青少年</span>
        <span style="color:lawngreen" v-else>儿童</span>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           age:66
        }
    });
</script>

⑥v-on

v-on: 语法格式，应该写表达式或者触发的函数
简写格式,如点击事件：@click=“show(‘我是参数’)”

<body>
    <!--v-on: 语法格式，应该写表达式或者触发的函数-->
    <div id="app">
        <!--完整写法-->
        <!--表达式-->
        <input type="button" v-on:click="num++" value="点我"/>{{num}}
        <!--触发函数 简写格式-->
        <input type="button" @click="show('我是参数')" value="点我好吗"/>
        <input type="button" @mouseover="over" @mouseout="out" value="移出移进"/>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            num:0,
            show(msg){
                alert(msg+"show time。。。");
            },
            over(){
                console.debug("我进来了");
            },
            out(){
                console.debug("我又出来了")
            }
        }
    });
</script>

⑦v-show

v-show: 控制标签属性 是style=“display: block” 还是 style=“display: none”
相当于控制标签是否显示

<body>
    <div id="app" >
        <span v-show="isShow">hello。。。world</span><br>
        <input type="button" @click="show()" value="显示或隐藏"/>
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            show(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>

五、vue组件

• 组件可以扩展 HTML 元素，封装可重用的代码
• 组件就是自定义标签，它内部存储了很多html代码

组件的分类：
1.全局组件（在所有vue实例中(在它所挂载元素下面有效)有效）
2.局部组件（在自己vue实例中(在它所挂载元素下面有效)有效）

①全局组件

<body>
    <div id="app">
        <mycomponent></mycomponent>
    </div>
    <div id="app1">
        <mycomponent></mycomponent>
    </div>
    <hr/>
</body>
<script type="text/javascript">
	//定义全局组件
    Vue.component("mycomponent",{
        template:"<h1>古大师不是傻逼</h1>"
    });
    new Vue({
        el:"#app"
    })
    new Vue({
        el:"#app1"
    })
</script>

②局部组件

<body>
    <div id="app">
        <!--局部组件 （在自己vue实例中(在它所挂载元素下面有效)有效）-->
        <mycomponent></mycomponent><!--显示-->
        <innercomponent></innercomponent><!--显示-->
        <outercomponent></outercomponent><!--显示-->
    </div>
    <div id="app1">
        <mycomponent></mycomponent><!--不显示-->
        <innercomponent></innercomponent><!--不显示-->
        <outercomponent></outercomponent><!--显示-->
    </div>   
</body>
<script type="text/javascript">
    //创建全局组件使用一个变量接受
    //使用outercomponent时就是全局组件
    let outercomponent = Vue.component("outercomponent",{
        template:"<h1>我有一头小毛驴</h1>"
    });
    //挂靠app
    new Vue({
        el:"#app",
        components:{
            mycomponent:{
                template:"<h1>我是一个局部组件</h1>"
            },
            /*当使用innercomponent时，就是局部组件*/
            innercomponent:outercomponent
        }
    });
    new Vue({
        el:"#app1"
    })
</script>

③组件注意事项

使用组件的注意事项：

• 1.组件名问题： 如果你命名是驼峰式命名(myComponent) 那你使用组件的时候，名字必须是
  < my-component></ my-component>
  注意：取组件名字的时候统一小写就行了

<body>
    <div id="app">
        <my-component></my-component>
    </div>
</body>
<script type="text/javascript">
    //定义全局组件
    Vue.component("myComponent",{
        template:"<h1>军军</h1>"
    });
    new Vue({
        el:"#app"
    })
</script>

• 2.定义组件模板的时候，必须有且有1个根元素，否则不能正常渲染组件

<script type="text/javascript">
    //定义全局组件
    Vue.component("myComponent",{
        template:"<div><h1>军军</h1><font color='red'>古二娃</font></div>"
    });
    new Vue({
        el:"#app"
    })
</script>

④组件定义方式

除了之前的常规方式，还有两种方式

• template模板方式
• script标签方式

template模板方式

<body>
    <div id="app">
       <innercomponent></innercomponent>
        <outercomponent></outercomponent>
        
        <!--把template标签直接放到挂载的dom中，它也是能直接显示的-->
        <template>
            <h1>测试</h1>
        </template>
    </div>

    <div id="app1">
        <outercomponent></outercomponent>
    </div>
    
   <!-- 定义组件的模板-->
   <template id="mycomponent">
       <form action="" method="post">
           用户名：<input type="text"/><br>
           密码：<input type="password"/><br>
           <input type="submit" value="提交">
       </form>
   </template>
</body>
<script type="text/javascript">
    //定义全局组件
    Vue.component("outercomponent",{
        template:"#mycomponent"
    })
    
    //挂载app
    new Vue({
        el:"#app",
        components:{
            innercomponent:{
                template:"#mycomponent"
            }
        }
    })

    //挂载app1
    new Vue({
        el:"#app1"
    })
</script>

script标签方式
script标签直接放到挂载的dom中它是不能被渲染的

<body>
    <div id="app">
        <outercomponent></outercomponent>
 
        <innercomponent></innercomponent>
        <!--方式3把script标签直接放到挂载的dom中它是不能被渲染的-->
        <script type="text/template">
                <h1>测试一波</h1>
        </script>
    </div>
   <!--
    方式2和方式3的区别：把template换成script 再加上type="text/template"
   -->
   <!-- script定义组件的模板方式3-->
   <script id="mytemplate" type="text/template">
       <form action="" method="">
           username:<input type="text" name="username"><br/>
           username:<input type="text" name="username"><br/>
           username:<input type="text" name="username"><br/>
           <input type="submit" value="提交">
       </form>
   </script>
</body>
<script type="text/javascript">
    //创建全局组件使用一个变量接受
    Vue.component("outercomponent", {
        template: "#mytemplate"
    });

    new Vue({
        el:"#app",
        components:{
            innercomponent:{
                template:"#mytemplate"
            }
        }
    })
</script>

⑤动态获取属性

• 组件获取动态元素，不是找的vue中的data属性，
  而是找组件中的data属性
• 模板中data对应的值，必须是一个函数，
  并且在函数内部返回的值必须是json对象

<body>
    <div id="app">
        <outercomponent></outercomponent>
    </div>
    
    <template id="mycomponent">
        <h1>姓名：{{name}}，年龄：{{age}}</h1>
    </template>
</body>
<script type="text/javascript">
    //定义全局组件
    Vue.component("outercomponent",{
        template:"#mycomponent",
        //data对应的值，必须是一个函数
        data(){
            //返回json格式数据
            return {
                name:"古老板",
                age:222
            };
        }
    })
    //挂靠app
    new Vue({
        el:"#app"
    })
</script>

六、vue路由

路由： 路由是负责将进入浏览器的请求，映射到特定的组件代码中
url地址映射到组件（html代码）
安装路由：npm install vue-router
安装成功之后，引入路由的核心库文件

使用路由步骤：

• 1.准备组件
• 2.映射关系（url映射组件）
• 3.告诉vue我要使用路由
• 4.组件渲染的位置

<body>
    <div id="app">
        <router-link to="/index">首页</router-link>
        <router-link to="/employee">员工</router-link>
        <router-link to="/product">产品</router-link>
        <!--组件渲染的位置-->
        <router-view></router-view>
    </div>
</body>
<script type="text/javascript">
    //创建组件
    var INDEX = Vue.component("index",{
        template:"<h1>首页啊</h1>"
    })
    var EMPLOYEE = Vue.component("employee",{
        template:"<h1>员工啊</h1>"
    })
    var PRODUCT = Vue.component("product",{
        template:"<h1>产品啊</h1>"
    })
    //创建路由
    var router = new VueRouter({
        //对应路径映射对应组件
        routes:[
            {path:"/index",component:INDEX},
            {path:"/employee",component:EMPLOYEE},
            {path:"/product",component:PRODUCT}
        ]
    })

    new Vue({
        el:"#app",
        //路由名称和属性名router相同，路由名称可省略 router：router=>router
        //这里是告诉vue，要使用路由
        router
    })
</script>

七、vue生命周期

• created 可以获取vue的data和methods里的东西
• mounted 挂载完毕，整个vue加载完毕，
  常用于加载列表、渲染， ajax请求发送到后台

<body>
    <div id="app">
    </div>
</body>
<script type="text/javascript">
   new Vue({
       el:"#app",
       data:{
           msg:"我是古老板"
       },
       methods:{
           show(){
               alert("古大哥迷上了刷抖音");
           }
       },
       //created可以获取vue的data和methods里的东西
       created(){
            alert(this.msg);
            this.show();
            this.msg = "古大哥戒烟了";
       },
       //挂载完毕，整个vue加载完毕
       mounted(){
           // 加载列表  渲染
           // ajax请求发送到后台
           alert("mounted"+this.msg);//弹出修改后的msg
       }
   })
</script>

vue生命周期图：（只关注created和mounted）

八、vue计算属性

• computed属性，取值不用加括号
• watch属性，用于随时监控值的变化

<body>
    <div id="app">
        {{birth}}==={{salary}}<br>
        <input type="text" v-model="msg"/>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data:{
            birthday:1429032123201, // 毫秒值
            msg:""
        },
        computed:{
            birth(){
                return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth()+"月";
            },
            salary(){
                return "工资"+30*200;
            }
        },
        watch:{
            //随时监控值的变化
            msg(newVal,oldVal){
                console.debug("新值："+newVal);
                console.debug("老值："+oldVal);
            }
        }
    });
</script>

九、webpack打包工具(了解)

webpack就是一个打包工具，
帮你把一些小块文件打包成一个大块文件，之后只需要导入打好包的文件。

为什么需要打包？

• 1.将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，
  提高网站效率。
• 2.将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
• 3.将代码打包的同时进行混淆，提高代码的安全性。

打包原理图：

使用webpack：
使用webpack前，需要安装服务和客户端

• 安装webpack服务 npm install -g webpack
• 安装webpack客户端 npm install -g webpack-cli

①打包js

ES6方式，import导入
创建js文件夹，创建a.js和b.js文件
a.js

//方式1，方式2
//import {util} from "./b";
//方式3
//import xxx from "./b";
/*var sum = xxx.sum();
alert(sum+5);*/

//导入多个
import {util1,util2} from "./b";
alert(util1.sum()+util2.sum());

b.js

//方式1
export const util1 = {
    sum(){
        return 20;
    }
}
//方式2
const util2 = {
    sum(){
        return 30;
    }
}
export {util2};

//方式3
/*export default {
    sum(){
        return 40;
    }
}*/

打包：webpack ./js/a.js -o ./dist/bundle.js
创建一个html文件引入最终打好的包文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="dist/bundle.js"></script>
</head>

②commonjs方式

commonjs方式，require导入
创建js文件夹，创建c.js和d.js文件
d.js

define(function () {
    return "军军";
});

c.js

let jun = require("./d");
let gu = "古老板";
console.debug(gu+jun);

打包：webpack ./js/c.js -o ./dist/bundle2.js
创建一个html文件引入最终打好的包文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="dist/bundle2.js"></script>
</head>

③配置打包

项目根目录创建webpack.config.js文件
webpack.config.js文件

//引入的路径模块
const path = require('path');

module.exports = {
    //申明入口
    entry: './js/c.js',
    //申明出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        //最终打包的文件名称
        filename: 'bundle3.js'
    }
};

c.js

let jun = require("./d");
let gu = "古大师";
console.debug(gu+jun);

d.js

define(function () {
    return "军军军";
});

只需输入webpack命令，即可完成打包

④打包css

1.安装style和css加载器

直接打包是使用不了，css的，需要安装style加载器和css加载器
style-loader和css-loader作用是不同的。

• css-loader: 加载.css文件
• style-loader:使用<style>将css-loader内部样式注入到我们的HTML页面

安装样式加载器:npm install style-loader --save-dev
安装css加载器:npm install css-loader --save-dev

2.配置css

在webpack.config.js文件引入下面代码

var path = require("path");
module.exports = {
    entry: './web/js/a.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,     //匹配文件规则
                use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            }
        ]
    }
}

3.打包

打包：webpack

⑤热更新web服务器

刚才的案例中,我们都是本地运行。webpack给我们提供了一个插件，可以帮我们运行一个web服务；

• 安装插件：npm install webpack-dev-server --save-dev
• 配置package.json

"scripts": {
	"dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"    
}

inline：自动刷新
hot：热加载
port：指定端口
open：自动在默认浏览器打开
host：可以指定服务器的 ip，不指定则为127.0.0.1
启动服务 npm run dev/test
启动服务会报错，原因是服务与webpack版本兼容问题
配置package.json

 "devDependencies": {
    "css-loader": "^3.4.0",
    "style-loader": "^1.1.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }

更改版本后，再安装
npm install
重新启动服务就可以了 npm run dev/test

访问页面：http://localhost:8080/11_require的演示.html

十、vue脚手架

简单理解就是别人把框架给你搭建好了

• 安装脚手架 npm install -g vue-cli
• vue-cli快速创建webpack项目 vue init webpack
  安装路由包括之前都是yes，之后都是no
• 启动脚手架服务 npm run dev
• localhost:8080/ 访问

原理分析图：