Vue学习笔记

const fn = () => {}   
fn()

const fn2 = (a, b) => {return a + b} 
fn(10, 20); // 结果是30

// 当形参只有一个()可以省略
const fn3 = a => {return a * 2}
fn(50); // 结果是100

// 当{}省略return也省略, 默认返回箭头后表达式结果
const fn4 = a => a * 2;
fn(50); // 结果是100

服务器是一台性能高, 24小时可以开机的电脑

服务器可以提供服务(例如: 文件存储, 网页浏览, 资源返回)

在window电脑里安装node后, 可以编写代码用node 启动一个web服务, 来读取本地html文件, 返回给浏览器查看

浏览器 -> 请求资源 -> 服务器

浏览器 <- 响应数据 <- 服务器

开发环境和生产环境以及英文"development", "production" 2个单词尽量会写会读

初始化包环境和package.json文件作用：

npm下载的包和对应版本号, 都会记录到下载包时终端所在文件夹下的package.json文件里

package.json中的dependencies和 devDependencies区别和作用

* dependencies  别人使用你的包必须下载的依赖, 比如yarn add  jquery

* devDependencies 开发你的包需要依赖的包,  比如yarn add webpack  webpack-cli -D (-D 相当于 --save-dev)

终端的熟练使用: 切换路径, 清屏, 包下载命令等

切换路径  cd  

清屏 cls 或者 clear

-------------------------------------------------------------------------------------------------------------------------------

webpack第一天（整理在后面。。。）

2.@vue/cli脚手架

⚫

@vue/cli 是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目

⚫

脚手架是为了保证各施工过程顺利进行而搭设的工作平台

问题1: 用Vue开发项目, 需要自己配置webpack吗?

Vue官方提供了@vue/cli包-可以创建脚手架项目

问题2: 使用脚手架好处是什么?

0配置开箱即用, 基于它开发我们的项目

2.1_@vue/cli安装

目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程

1.全局安装命令
```
yarn global add @vue/cli
# OR
npm install -g @vue/cli
```
注意: 如果半天没动静(95%都是网速问题), 可以ctrl c
停止重新来
换一个网继续重来
2.查看vue脚手架版本
```
vue -V
```
2.2_@vue/cli 创建项目启动服务
目标: 使用vue命令, 创建脚手架项目

==注意: 项目名不能带大写字母, 中文和特殊符号==
1.创建项目
```
# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo
```
2.选择模板和包管理器, 等待脚手架项目创建完毕

选择模板

==可以上下箭头选择, 弄错了ctrl+c重来==

选择用什么方式下载脚手架项目需要的依赖包

3.回车等待生成项目文件夹+文件+下载必须的第三方包们

4.进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demo

npm run serve
# 或
yarn serve

只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)

打开浏览器输入上述地址

总结: vue命令创建工程目录, 项目内置webpack本地热更新服务器, 帮我们打包项目预览项目

2.3 @vue/cli 目录和代码分析

目标：文件夹和文件含义, 关键文件里代码意思

补充：APP.vue可以写html，css，js

index.html里面的div（id="app"）是一个容器--就是把main.js的APP.vue

的代码渲染到页面。

小结

2.5_@vue/cli 自定义配置

目标：项目中没有webpack.config.js文件，因为Vue脚手架项目用的vue.config.js

src并列处新建vue.config.js, 填入配置, 重启webpack开发服务器

2.6_eslint检查代码

目标: 知道eslint的作用, 和如何暂时关闭, 它是一个==代码检查工具==

例子: 先在main.js 随便声明个变量, 但是不要使用

代码格式错误：

方式1: 手动解决掉错误, 以后项目中会讲如何自动解决

方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务

2.7_@vue/cli 单vue文件讲解

目标: 单vue文件好处, 独立作用域互不影响

Vue推荐采用.vue文件来开发项目

template里只能有一个根标签

vue文件-独立模块-作用域互不影响

style配合scoped属性, 保证样式只针对当前template内标签生效

vue文件配合webpack, 把他们打包起来插入到index.html

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

最终: Vue文件配合webpack, 把他们打包起来插入到index.html, 然后在浏览器运行

2.8_@vue/cli 欢迎界面清理

目标: 我们开始写我们自己的代码, 无需欢迎页面

src/App.vue默认有很多内容, 可以全部删除留下框
assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)

知识点补充：data（）：{}表示的是函数=data：funtcion{}

写出第一个vue的hello world

作用：vue对象可以实现数据和模板的关联，将数据渲染到指定的模板---类似于模板引擎！

步骤：

1.引入vue的js文件

2.创建vue对象

3.如何实现vue对象中的配置

4.实现vue数据所对应的模板

代码展示：

注意：页码错误看Console或者Elements，数据错误看APPlication。

学习Vue中的指令：

网站推荐：Vue.js

错误整理：---属性没有定义

可以使用三元表达式，但是不能使用if判断！

1.插值表达式：

作用：实现数据绑定的：数据替换
其它使用方式
- 可以拼接字符串
- 可以算术运算
- 可以添加三元表达式
- 可以调用api方法
- 但是：不能添加js逻辑语句

代码展示：

注：插值表达式只能双标签中间

MVVM模式（面试）

目标：转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了
⚫ 设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结

什么是设计模式?
设计模式是对代码分层, 引入一种架构的概念
MVVM是什么?
MVVM(模型, 视图, 视图模型双向关联的一种设计模式)
MVVM好处?
减少DOM操作, 提高开发效率

v-text

指令：相当于标签中的属性，在使用的时候的格式：指令 = “值”

作用：可以将指定的成员值放置到指定的标签之间
注意：单标签不能使用
使用方式：v-text='值'，值必须是定义过的属性名称
扩展：
- 写表达式
- 使用三元表达式
- 调用api函数

代码展示：

  <body>
        <div id="app">
            <!-- <p 属性="值"></p> -->
            <p>{{msg}}</p>
            <p v-text='msg+"jack"'></p>
            <p v-text='msg.toUpperCase()'></p>
            <p v-text='age>18?"ok":"no"'></p>
单标签不能使用！
            <!-- <input type="text" v-text='msg'> -->  
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'你好啊abc',
                    age:20
                }
            })
        </script>
    </body>

v-html

作用：可以识别标签，并解析html结构，注意是html，不是js！！！

使用方式：v-html="值"

代码展示：

<body>
        <div id="app">
            <p>{{msg}}</p>
            <p v-text='msg'></p>
            <p v-html='msg'></p>
            <p>{{done}}</p>
            <!-- 不能解析 js -->
            <p v-html='done'></p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'<h1>你好啊</h1>',
                    done:'alert(123)'
                }
            })
        </script>
    </body>

以上代码输出的结果：

2.v-bind

作用：可以动态绑定数据成员

也就是a标签的href后面的属性值是动态变化的，但是前部分是不变的，后面的是变换的，采取反引号。

<a v-bind:href="'edit.html?id='+id">编辑</a>

简写：

<img  ：src="" alt"">
//把冒号写在了属性的前面

任何属性都能动态绑定。

使用方式：

v-bind：属性名称=“动态数据”

动态数据

1）属性名称

2）拼接表达式

使用场景：当属性的值是动态变化的时候就需要用到v-bind了
动态绑定样式--（易错点）
1）v-bind：class="{样式名称：布尔值}",bool值为true，会添加这个样式，否则就不添加。

2）v-bind：class=【claA，claB】：claA和claB是变量，这个变量可以指定对应的样式。

代码展示：

  <script src="vue.js"></script>
</head>
<style>
    .red {
        color: red;
    }
</style>

<body>
    <div id="app">
        <!-- 1.让a标签的id随数据的id的变化而变化 -->
        <!-- <a v-bind:href="index.html?id=+'id'">编辑</a> -->
        <!--易错点：把固定不变的数据需要 用单引来包裹 -->
        <a v-bind:href="'index.html?id='+id">编辑</a>
        <!-- 2.绑定点击事件@click -->
        <!-- <button @click='del'>删除</button>  //报错？？？未定义？？？ -->
        <!--3.简写方式1  -->
        <img :src="img" alt="">
        <!-- 4.设置样式！！！！--默认就是true吗？ -->
        <p :class={red:hasRed}>改变样式</p>
        <!-- 5.切换样式：当点击的时候布尔值取反 -->
        <button @click='hasRed=!hasRed'>切换样式</button>
        <p :style='{fontSize:fs+"px"}'>字体大小</p>

    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            id: 4,
            neme: "橘子",
            age: 18,
            img: "./img.png",
            red: "red",
            hasRed: true,
            fs:50

        }
    })
</script>

以上代码效果：

v-for

作用：可以实现遍历，它可以遍历对象，也可以遍历数组

使用方式：v-for=''

你想循环生成什么结构，就在这个结构中添加v-for

遍历数组：v-for='(value,index) in arr'
遍历对象：v-for="(value,key,index) in obj"
使用：生成动态循环结构
补充说明：:key----？？？？？不是很清晰
- 设置:key可以提高页面刷新效率

遍历数组的代码展示：


  <div id="app">
        <!-- 2.1 循环数数组的元素及数组的索引号-->
        <!-- 为什么是undefined？--为什么不能使用双引号？注意：格式！！-->
        <p v-for='(value,index) in arr'>{{value+':'+index}}数组元素+索引</p>
        <!-- <ul>
    <li v-for='(value,index) in arr'>{{value+':'+index}}</li>
</ul> -->

        <!-- 2.2只遍历数组的元素或者只遍历数组的索引 -->
        <ul>
            <li v-for='(value,index) in arr'>{{value}}数组元素</li>
        </ul>

        <ul>
            <li v-for='(value,index) in arr'>{{index}}索引</li>
        </ul>
</div>
--------------------------------------------------------------------------------
<script>
    // 1.v-for主要就是用来遍历数组或者遍历对象的

    var vm = new Vue({
        el: "#app",
        data: {

            // 1.1遍历数组---v-for(value,index)in arr表示：遍历的数数组和索引
            arr: [1, 3, 6, 7],
}
})
</script>

遍历对象的代码展示：


<div id="app">
  <!-- 2.3遍历对象 -->
        <!-- 不就是用一个变量来表示吗？为什么顺序会不同？-并且后面的决定 -->
        <ul>
            <li v-for='(value,key,index) in obj'>{{key+':'+value+':'+index}} 对象</li>
        </ul>

        <ul>
            <li v-for='(value,key,index) in obj'>{{value+':'+key+':'+index}} 对象</li>
        </ul>
</div>

------------------------------------------------------------------

<script>
    // 2.v-for主要就是用来遍历数组或者遍历对象的

    var vm = new Vue({
        el: "#app",
        data: {

            // 2.1遍历数组---v-for(value,index)in arr表示：遍历的数数组和索引
            arr: [1, 3, 6, 7],
            // 2.2遍历对象--v-for(value,key,index)in obj
            obj: {
                name: "橘子",
                age: 18,
            },
}
})
</script>

数组里的对象的遍历：

<body>
    <div id="app">
<!-- 3.创建数据的模板引擎！！！！ -->
        <table border="1" width="500px">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody>
                <!-- 重点：渲染页面---把握不牢 -->
                <!-- 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

                <div v-for="item in items">
                    {{ item.text }}
                </div> -->
                <!-- 渲染页面方式一 -->
                <tr v-for='value in stuList'>
                    <td>{{value.id}}</td>
                    <td>{{value.name}}</td>
                    <td>{{value.age}}</td>
                    <td>{{value.address}}</td>
                </tr>    
                <!-- 渲染页面方式二：-->
                 <!-- 方式二：外层循环的是数组，里层循环的是对象---此方式不推荐使用！！！ -->
                 <!-- 4.补充：key？？？？ -->
                 <tr v-for='value in stuList' :key='value.id'>
                    <td v-for='subv in value'>{{subv}}</td>
                </tr>

            </tbody>

    </div>
</body>
<!--  -->
<script>
    // 2.v-for主要就是用来遍历数组或者遍历对象的

    var vm = new Vue({
        el: "#app",
        data: {

            // 2.1遍历数组---v-for(value,index)in arr表示：遍历的数数组和索引
            arr: [1, 3, 6, 7],
            // 2.2遍历对象--v-for(value,key,index)in obj
            obj: {
                name: "橘子",
                age: 18,
            },
            // 2.3重点：遍历数组里面的对象并且渲染到页面的表格里面！！！

            stuList: [
                {
                    id: 1,
                    name: 'jack',
                    age: 20,
                    address: '上海',
                    gender: '男'
                },
                {
                    id: 2,
                    name: 'rose',
                    age: 18,
                    address: '广州',
                    gender: '女'
                },
                {
                    id: 3,
                    name: 'tom',
                    age: 19,
                    address: '西安'
                }
            ]
        }

    })
</script>

代码解释分析图：

--------------------------------------------------------------------------------------------------------------

4.v-model

特性：可以实现双向数据绑定
- 注：只能用在表单上
  你修改数据，页面有变化，你修改页面中的数据，数据源有变化
- 只有能够实现用户交互的元素才能添加双向绑定：input select textarea
使用方式：v-model='值'
使用场景
- 收集数据

经典错误：

表示不支持双标签！！！

代码展示：

3.v-on

实现事件绑定
使用语法：v-on:事件名称=‘事件处理函数’ | v-on:事件名称=‘事件处理函数(参数)’
使用场景：你想添加事件的时候就需要使用v-on
简写：@
-------------------------
- v-on:事件名="要执行的==少量代码=="
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
简写: @事件名="methods中的函数"

<!-- vue指令:   v-on事件绑定-->
<p>你要买商品的数量: {{count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>

<button @click="subFn">减少</button>

<script>
    export default {
        // ...其他省略
        methods: {
            addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
</script>

总结: 常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数

3.4_vue指令-v-on事件对象

目标: vue事件处理函数中, 拿到事件对象

语法:

无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

3.5_vue指令-v-on修饰符

目的: 在事件后面.修饰符名 - 给事件带来更强大的功能

语法:

@事件名.修饰符="methods里函数"

.stop - 阻止事件冒泡
.prevent - 阻止默认行为
.once - 程序运行期间, 只触发一次事件处理函数

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
    <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被触发");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

总结: 修饰符给事件扩展额外功能

3.6_vue指令-v-on按键修饰符（了解）
目标: 给键盘事件, 添加修饰符, 增强能力
语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键

案例：翻转世界
---------------------------------------------------------------------------------------------------------------

v-if

根据值决定是否创建指定的元素

v-if='值'：值是bool值

效果：

如果值是true,则会创建这个元素并进行渲染--显示
如果值为False,则不会创建这个元素-"隐藏"

<div id="app">
    <p v-if='isShow'>能不能看到我啊？</p>
    <button @click='isShow=!isShow'>切换</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow:true
        }
    })
</script>

v-show

根据值来设置元素的Display样式

v-show='值'，值是bool值
效果：
- 如果值是true，将这个元素的display样式设置为block--显示
- 如果值是false，将这个元素的display样式设置为none--隐藏

<div id="app">
    <p v-show='isShow'>能不能看到我啊？</p>
    <button @click='isShow=!isShow'>切换</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isShow:true
        }
    })
</script>

使用场景：

1.如果是伴随着异步请求所造成的页面结构的操作，一般就可以使用v-if

2.如果是页面中的共用部分的显示和隐藏那么一般就可使用v-show

v-if v-else-if v-else

<!-- bool值   关系表达式(> < >= <= != === == !==) 逻辑表达式：(非not 与and 或or) -->
    <div id="app">
        输入成绩：<input type="text" v-model='score'>
        <p>你的成绩等级是：</p>
        <div v-if='score>=90'>A</div>
        <div v-else-if='score>=80'>B</div>
        <div v-else-if='score>=70'>C</div>
        <div v-else-if='score>=60'>D</div>
        <div v-else>E</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                score: 0
            }
        })
    </script>

注：不是每个指令都会带值！！！！

v-cloak（了解）

作用：它可以隐藏指定的元素，直到当前vm实例编译完毕
使用场景：不希望页面中出现未编译的标签
使用方法：
- 添加指定的样式
- 为元素的添加v-cloak

<style>
        [v-cloak] {
            display: none;
        }
    </style>
---------------------------
<div id="app">
        <p v-cloak>{{msg}}</p>
    </div>

v-pre,v-once（了解）

 <div id="app">
            <!-- 这个标签中插值不会被解析 -->
            <p v-pre>{{msg}}</p>
            <!-- 只渲染一次，后期的渲染会跳过这个元素 -->
            <p v-once>{{msg}}</p>
            <input type="text" v-model='msg'>
            <!-- 插槽：匿名插槽，具名插槽，作用域插槽 -->
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'你好'
                }
            })
        </script>

--------------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------------------------------

Vue第三天

1.0_v-for更新监测

目标：目标结构变化, 触发v-for的更新

情况1：数组的翻转

<template>
  <div>
    <!-- 需求1：实现数组翻转 -->
    <ul>
      <li v-for="(val,index) in arr" :key="index">{{ val }}</li>
    </ul>
    <button @click="revBtn">数组翻转</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [5, 3, 2, 68],
    };
  },
  //定义方法的集合：
  methods: {
revBtn(){
  this.arr.reverse()  //翻转数组--这里的this指向的是实例化
}    

  }
};
</script>

情况2：截取数组

注：splice（）与slice（）的区别？？？？

代码方法提示的插件？

slice（）不会改变原数组，所以不会更新页面！

更新数组的方法：

Webpack第一天

1.1webpack基本概念

webpack本质是, 一个第三方模块包, 用于分析, 并打包代码

1.2webpack的作用：（面试）

1.打包代码

2减少文件数量.缩减代码的体积

3.提高浏览器速度

2.1webpack使用步骤（重要）

环境准备：

1.项目初始化

项目的初始化的目的：就是用package.json来记录包的

yarn init

2.安装依赖包

安装依赖包：就是安装该webpack第三方打包压缩包

yarn add webpack webpack-cli -D

//为什么会有两个webpack？因为第一个是打包文件代码 第二个是用来存一些方法的代码！！！

3.配置package.json

配置也就是在记录该包的js文件（）里面设置自定义命令

"script":{
"build":"webpack"
}

//注：build是可以修改其他名字的 但是不建议修改。

2.2案例: webpack基础使用

需求： 2个js文件 ->打包成1个js文件

分析：

默认入口: ./src/index.js

默认出口: ./dist/main.js

==注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名==

具体步骤：

1.初始化包环境

yarn init

2.安装依赖包

yarn add webpack webpack-cli -D

3.配置scrpts（自定义命令）

scripts: {
	"build": "webpack"
}

4.新建src目录文件夹（注意和package.json同级）--然后在创建add.js

5.add.js和index.js进行导入和导出

6.运行打包命令

yarn build
#或者 npm run build

总结: src并列处, 生成默认dist目录和打包后默认main.js文件

2.3_案例: webpack再次打包

需求：代码更多后, 如何打包呢?

解决：重新打包即可！！！

yarn build

错误整理：表示该模块没有找到

注：src必须放在根目录！！！与！package.json同级！！！

补充新的知识点：reduce（不是很重要--了解）

3.webpack的配置

3.0_webpack-入口和出口

问题: 能否更改webpack打包默认的入口和出口?

默认入口: ./src/index.js

默认出口: ./dist/main.js

webpack配置 - webpack.config.js(默认)

新建src并列处, webpack.config.js
填入配置项

注意: webpack基于node, 所以导出, 遵守CommonJS规范

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：

module.exports = {
  entry: './path/to/my/entry/file.js',
};
Ti

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

const path = require('path'); //导入path模块

module.exports = {  //暴露出去
  entry: './path/to/my/entry/file.js',  //入口
  output: {
    path: path.resolve(__dirname, 'dist'),  
//resolve表示拼接，__dirname表示：补齐当前路径，

    filename: 'my-first-webpack.bundle.js',  //出口--不需要手动设置 因为在打包的时候就会自动有了
  },
};

具体步骤：新建一个文件夹webpack.config.js（必须是该文件名，与src同级）--然后配置入口和出口---修改文件名--打包检测结果s

注意: webpack基于node, 所以导出, 遵守CommonJS规范

3.1_yarn build执行流程图

重点: 所有要被打包的资源都要跟入口产生直接/间接的引用关系

一句话总结下`yarn build`后干了什么
1. 执行webpack命令, 找到配置文件, 入口和依赖关系,
打包代码输出到指定位置

3.2_案例-隔行变色（自己不熟练）
webpack打包代码, jquery实现功能

分析：先初始化--然后添加webpack模块包---然后设置配置及入口出口文件--创建页面文件（index.html）---新建的入口文件（里面引入jquery--设置页面效果）---然后打包--然后在页面引入打包创建的文件---然后查看效果

代码展示：

核心代码

// 导入:
// 设置html的页面结构，然后引入jquery
// 1.获取index.html--单纯获取页面执行的代码
import $ from "jquery"
// 2.使用jquery来设置样式--导入jquery包--获取li--设置奇偶行样式
$("#myUL>li:odd").css("color","red")
$("#myUL>li:even").css("color","green")
// 3.打包

页面的引入：

重点: webpack打包后的js引入到html中使用

<!-- 引入打包的文件--因为在浏览器里面不能识别import标签 -->
<script src="../dist/bundle.js"></script>

总结：

用yarn下的包, 如何作用在前端项目中?
1. 借助webpack, 把模块和代码打包
2. 把js文件引入到html执行查看效果

问题: 打包后还得自己手动建立html文件, 累不累?

3.3HtmlWebpackPlugin

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

安装

yarn add html-webpack-plugin  -D

webpack.config.js配置(存在疑问？)

在入口和出口文件的基础上添加相应的代码

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ]
}

重要: webpack就像一个人, webpack.config.js是人物属性, 给它穿什么装备它就干什么活

如何让webpack打包时, 自动生成html文件呢?
1. 依赖html-webpack-plugin插件, yarn下载此插件
2. 在webpack.config.js配置写入即可

总结: 保存原因, 因为webpack默认只能处理js类型文件

3.4_webpack打包css文件

目标：编写css代码, 让webpack打包

1. 新建 - src/css/index.css
2. 编写去除li圆点样式代码
3. (重要) 一定要引入到入口才会被webpack打包
4. 执行打包命令观察效果

报错: 因为webpack默认只能处理js文件

总结：

为什么webpack打包css文件会报错呢?
1. webpack默认只能识别js类型的文件

问题: 那如何才能让webpack识别和打包css文件呢?

3.5_webpack-使用加载器

目标: loaders加载器, 可让webpack处理其他类型的文件, 打包到js中

原因: webpack默认只认识 js 文件和 json文件

css-loader 让webpack能处理css类型文件
style-loader 把css插入到DOM中
1. 下载加载器

yarn add style-loader css-loader -D

2. webpack.config.js配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...其他代码
    module: { 
        rules: [ // loader的规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

4.新建src/css/li.css - 去掉li默认样式

ul, li{
    list-style: none;
}

5.引入到main.js (因为这里是入口需要产生关系, 才会被webpack找到打包起来)

import "./css/index.css"

6. 运行打包后dist/index.html观察效果和css引入情况

总结: 万物皆模块, 引到入口, 才会被webpack打包, css打包进js中, 然后被嵌入在style标签插入dom

webpack如何支持css打包? 打包后样式在哪里? 如何生效?
1. 依赖css-loader和style-loader
2. css代码被打包进js文件中
3. style-loader会把css代码插入到head下style标签内

3.6_webpack处理less文件

ess-loader作用: 识别less文件
less 作用: 将less编译为css
1. 新建src/less/index.less – 设置li字体大小
2. 把index.less引入到入口处
3. 下载加载器来处理less文件
4. webpack.config.js针对less配置
5. 打包观察效果

1.下载依赖包

yarn add less less-loader -D

2.webpack.config.js 配置

module: {
  rules: [ // loader的规则
    // ...省略其他
    {
    	test: /\.less$/,
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

3.src/less/index.less - 设置li字体大小24px

@size:24px;

ul, li{
    font-size: @size
}

4.引入到main.js中

import "./less/index.less"

5.打包运行dist/index.html 观察效果

总结: 只要找到对应的loader加载器, 就能让webpack处理不同类型文件

webpack如何支持less打包? 需要注意什么?
1. 依赖less-loader和less模块包
2. 转换css后还需要css-loader和style-loader的处理

3.7_webpack处理图片文件--存在问题？

1. 在src/assets/准备图片文件
2. 在index.less对body设置背景图片
3. 在入口导入图片文件, 设置到img标签插入到body
4. 打包观察效果
3.7_webpack处理图片文件
报错: 因为webpack无法自己处理图片文件

解决：

思路：在webpack.config.js文件里设置相应的配置即可。

1.如果使用的是webpack5版本的, 直接配置在webpack.config.js - 的 rules里即可

1.1如果你用的是webpack4及以前的, 请使用者里的配置--下载依赖包

yarn add url-loader file-loader -D

{
  test: /\.(png|jpg|gif|jpeg)$/i,
  use: [
    {
      loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
      // 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
      options: {
        limit: 8 * 1024,
      },
    },
  ],
}

图片转成 base64 字符串

好处就是浏览器不用发请求了，直接可以读取
坏处就是如果图片太大，再转base64就会让图片的体积增大 30% 左右

2.src/assets/准备2个图文件

3.在css/less/index.less - 把小图片用做背景图

body{
    background: url(../assets/logo_small.png) no-repeat center;
}

4.在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

// 引入图片-使用
import imgUrl from './assets/1.gif'
//先通过创建标签获取图片
const theImg = document.createElement("img")
//设置图片路径
theImg.src = imgUrl
//在body添加子元素上显示
document.body.appendChild(theImg)

6.打包运行dist/index.html观察2个图片区别

总结: url-loader 把文件转base64 打包进js中, 会有30%的增大, file-loader 把文件直接复制输出

webpack如何支持图片打包? 对图片有哪2种处理方案?
1. webpack5, 在rules里, 针对图片文件设置type: asset
2. 小于8KB转base64字符串进js里, 大于8KB输出文件

3.8_webpack加载文件优缺点

图片转成 base64 字符串

好处就是浏览器不用发请求了，直接可以读取
坏处就是如果图片太大，再转base64就会让图片的体积增大 30% 左右

3.9_加载器 - 处理字体文件---有问题？

目标: 用asset module技术, asset/resource直接输出到dist目录下

1.webpack5使用这个配置

{ // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',
    generator: {
    	filename: 'font/[name].[hash:6][ext]'
    }
}

webpack4及以前使用下面的配置

webpack.config.js - 准备配置

 { // 处理字体图标的解析
     test: /\.(eot|svg|ttf|woff|woff2)$/,
         use: [
             {
                 loader: 'url-loader',
                 options: {
                     limit: 2 * 1024,
                     // 配置输出的文件名
                     name: '[name].[ext]',
                     // 配置输出的文件目录
                     outputPath: "fonts/"
                 }
             }
         ]
 }

2.src/assets/ - 放入字体库fonts文件夹

3.在main.js引入iconfont.css

// 引入字体图标文件
import './assets/fonts/iconfont.css'

4.在public/index.html使用字体图标样式

<i class="iconfont icon-weixin"></i>

执行打包命令-观察打包后网页效果

总结: url-loader和file-loader 可以打包静态资源文件

webpack如何处理图标字体文件呢?
1. 在webpack.configjs的rules里针对字体图标文件类型
设置asset/resource, 直接输出到dist下

3.10_webpack对JS语法降级

目标: 让webpack对高版本的js代码, 降级处理后打包

写代码演示: 高版本的js代码(箭头函数), 打包后, 直接原封不动打入了js文件中, 遇到一些低版本的浏览器就会报错

原因: webpack 默认仅内置了模块化的兼容性处理 import export

babel 的介绍 => 用于处理高版本 js语法的兼容性 babel官网

解决: 让webpack配合babel-loader 对js语法做处理

babel-loader文档

安装包

yarn add -D babel-loader @babel/core @babel/preset-env

配置规则

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
    }
  ]
}

在main.js中使用箭头函数(高版本js)

// 高级语法
const fn = () => {
  console.log("你好babel");
}
console.log(fn) // 这里必须打印不能调用/不使用, 不然webpack会精简成一句打印不要函数了/不会编译未使用的代码
// 没有babel集成时, 原样直接打包进lib/bundle.js
// 有babel集成时, 会翻译成普通函数打包进lib/bundle.js

打包后观察lib/bundle.js - 被转成成普通函数使用了 - 这就是babel降级翻译的功能

总结: babel-loader 可以让webpack 对高版本js语法做降级处理后打包

webpack如何帮助我们降低js版本语法的呢?
1. 借助babel-loader和babel编译器, 给webpack配置上

面试题（未整理。。。。）

-----------------------------------------------------------------------------------------------------------------------------

webpack第二天

4.0_webpack开发服务器

问题: 每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s)
原因:
⚫ 从0构建依赖
⚫ 磁盘读取对应的文件到内存, webpack开始加载
⚫ 再用对应的 loader 进行处理
⚫ 将处理完的内容, 输出到磁盘指定目录
解决: 起一个开发服务器, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用
总结: webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示

为什么要使用webpack开发服务器呢?
1. 打包在内存中, 速度快
2. 自动更新打包变化的代码, 实时返回给浏览器显示

具体步骤：

1. 下载模块包

2. 自定义webpack开发服务器启动命令serve – 在package.json里

3. 启动当前工程里的webpack开发服务器

4. 重新编写代码, 观察控制台和浏览器是否自动打包和更新

如何使用webpack开发服务器实时打包我们代码呢?
1. 确保下载了webpack-dev-server到工程中
2. 在package.json-配置自定义命令, 然后启动即可
3. webpack-dev-server会给我们一个地址+端口浏览器
访问即可看到在内存中打包的index.html页面