Vue2学习笔记

前端工程化工具 — webpack

实际的前端开发：

• 模块化（js的模块化、css的模块化、资源的模块化）
• 组件化（复用现有的U1结构、样式、行为）
• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
• 自动化（自动化构建、自动部署、自动化测试）

目前主流的前端工程化解决方案：

• webpack（ https://www.webpackjs.com/ ）
• parcel（ https://zh.parceljs.org/ ）

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

简单案例
1、npm init -y
2、npm i jquery -S

安装webpack

nmp install webpack@5.42.1 webpack-cli@4.7.2 -D
//只在开发阶段需要加-D，开发和上线都需要用的加-S
//至于应该加-D还是-S，找https://npmjs.com

配置webpack

1.在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z0zszuTR-1670055253419)(D:\文件\markdown图片\image-20210925211349193.png)]

2.在 package.json 的 scripts 节点下，新增 dev 脚本如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bD0Ghy21-1670055253421)(D:\文件\markdown图片\image-20210925211442911.png)]

3.在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

4.导入js文件改成

<script src="./dist/main.js"></script>

至此，兼容性问题解决

但是代码并没有压缩，如果要压缩，只需要把mode改为production

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

① 默认的打包入口文件为 src -> index.js

② 默认的输出文件路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

示例代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgTA5w9U-1670055253421)(D:\文件\markdown图片\image-20210925213304825.png)]

webpack的插件

webpack 插件有如下两个：

① webpack-dev-server

• 类似于 node.js 阶段用到的 nodemon 工具
• 每当修改了源代码，webpack 会自动进行项目的打包和构建

② html-webpack-plugin

• webpack 中的 HTML 插件（类似于一个模板引擎插件）
• 可以通过此插件自定制 index.html 页面的内容

webpack-dev-server

安装：

npm install webpack-dev-server@3.11.2 -D

配置：

修改 package.json -> scripts 中的 dev 命令如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-juRimfyl-1670055253422)(D:\文件\markdown图片\image-20210925214930514.png)]

② 再次运行 npm run dev 命令，重新进行项目的打包

③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

为了更快的访问到修改的文件效果，可以加载内存中的bundle.js文件

<script src="/bundle.js"></script>

html-webpack-plugin

安装

npm install html-webpack-plugin@5.3.2 -D

作用：把src下的index.html文件放到根目录中

配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8VZpAVID-1670055253423)(D:\文件\markdown图片\image-20210927093319412.png)]

HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

devServer

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hHWdTSMI-1670055253424)(D:\文件\markdown图片\image-20210927094054910.png)]

loader

第三方加载器

如打包处理css文件，需安装

npm i style-loader@3.0.0 css-loader@5.2.6 -D

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZBBE9aV-1670055253426)(D:\文件\markdown图片\image-20210927202039531.png)]

打包处理less文件：

npm i less-loader@10.0.1 less@4.1.1 -D

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yaFZd75O-1670055253427)(D:\文件\markdown图片\image-20210927202728768.png)]

打包处理样式表中与url 路径相关的文件

npm i url-loader@4.1.1 file-loader@6.2.0 -D

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AfceGEqs-1670055253428)(D:\文件\markdown图片\image-20210927203723169.png)]

打包处理 js 文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WKGgRcP7-1670055253431)(D:\文件\markdown图片\image-20210927204939199.png)]

安装babel-loader

处理高级语法

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2l4gl56d-1670055253443)(D:\文件\markdown图片\image-20210927205145880.png)]

配置 babel-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FclC4OjL-1670055253444)(D:\文件\markdown图片\image-20210927205637777.png)]

js文件导入

import $ from 'jquery'
import './css/index.css'
import './css/index.less'
import logo from './images/logo.jpg'

打包发布

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

② 开发环境下，打包生成的文件不会进行代码压缩和性能优化

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-phIsknhV-1670055253445)(D:\文件\markdown图片\image-20210927210453526.png)]

–model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

上线时使用npm run build

将会压缩js等文件，可以把dist文件夹拷贝给后端了

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SrWREDJv-1670055253446)(D:\文件\markdown图片\image-20210927211210448.png)]

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7DzGgVJE-1670055253447)(D:\文件\markdown图片\image-20210927211227442.png)]

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L2xYn9Cl-1670055253448)(D:\文件\markdown图片\image-20210927211624169.png)]

Source Map

开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-faTHGIUE-1670055253449)(D:\文件\markdown图片\image-20210927212541200.png)]

在发布/生产环境下，最好关闭 devtool 选项，防止原始代码暴露给别有所图之人。

或者只定位行号，不暴露源码，可以将 devtool 的值设置为nosources-source-map。

实际开发会使用命令行工具（CLI）一键生成webpack的项目

路径问题

关于开发的时候，导入模块路径问题，最好不要从里往外用…/…/来找，太麻烦，使用从外往里找，@代表根目录

配置，在webpack.config.js的module.exports里面

resolve: {
   
    alias: {
   
      // 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
      '@': path.join(__dirname, './src/')
    }
  }

import info from '@/info.js'

Vue学习

组件化、声明式、虚拟化dom

容器和实例是一对一关系

特性：

数据驱动视图

双向数据绑定

MVVM模型

Mode 数据源、View 视图、ViewModel 就是 vue 的实例

Vue模板语法：

插值语法：用于解析标签体内容{ {xxx}}

指令语法：

内容渲染指令

v-text

把值渲染到p标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6WsmDTpR-1670055253449)(D:\文件\markdown图片\image-20210928110747275.png)]

{ {}}语法

解决 v-text 会覆盖默认文本内容的问题。这种 { { }} 语法的专业名称是插值表达式（英文名为：Mustache）

注意不能用在属性节点，只能用在内容节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wBVdJbxf-1670055253450)(D:\文件\markdown图片\image-20210928111025951.png)]

v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-diirraL7-1670055253450)(D:\文件\markdown图片\image-20210928111218835.png)]

属性绑定指令

v-bind:

由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。单向绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fUHXNXmg-1670055253451)(D:\文件\markdown图片\image-20210928111749772.png)]

JavaScript表达式

除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7I3muhfh-1670055253452)(D:\文件\markdown图片\image-20210928112511283.png)]

事件绑定指令

v-on

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aK9nBpdr-1670055253452)(D:\文件\markdown图片\image-20210928120558397.png)]

注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8SkemPss-1670055253453)(D:\文件\markdown图片\image-20210928120746423.png)]

如何在函数内部修改data数值

使用this.

由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）。

$event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。

$​event 可以解决事件参数对象 event 被覆盖的问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IpSdWvsY-1670055253454)(D:\文件\markdown图片\image-20210928122238859.png)]

事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。

常用的 5 个事件修饰符如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7MfgiTEm-1670055253454)(D:\文件\markdown图片\image-20210928122638882.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0laBvskg-1670055253455)(D:\文件\markdown图片\image-20210928122645693.png)]

按键修饰符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rvg0og3V-1670055253456)(D:\文件\markdown图片\image-20210928122959445.png)]

双向绑定指令

v-model

辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

相当于v-bind和v-on的语法糖

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sC2hSV46-1670055253456)(D:\文件\markdown图片\image-20210928123711583.png)]

只有表单元素才可以使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2wyJ0gwO-1670055253457)(D:\文件\markdown图片\image-20210928124241734.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GwkGJ5M2-1670055253457)(D:\文件\markdown图片\image-20210928124248353.png)]

条件渲染指令

v-if

动态添加和移除元素

结合v-else、v-else-if使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-84HpiABr-1670055253458)(D:\文件\markdown图片\image-20210928160947560.png)]

v-show

添加和移除display：none

列表渲染指令

v-for

用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使

用 item in items 形式的特殊语法，其中：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xH7eESV0-1670055253459)(D:\文件\markdown图片\image-20210928165826255.png)]

<div id="app">
    <table class="table table-bordered table-hover table-striped">
      <thead>