第1章前端工程化开篇

1.1 什么是前端工程化

**前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化**的问题，以提高效率和降低成本。

1.2 前端工程化实现技术栈

前端工程化实现的技术栈有很多，我们采用ES6+Nodejs +npm+Vite+VUE3+Router+Pinia+Axios+Element-plus组合来实现。

ECMAScript6 VUE3中大量使用ES6语法；
Nodejs 前端项目运行环境；
npm 依赖下载工具；
Vite 前端项目构建工具；
Vue3 优秀的渐进式前端框架；
Router 通过路由实现页面切换；
Pinia 通过状态管理实现组件数据传递；
Axios ajax异步请求封装技术实现前后端数据交互；
Element Plus 可以提供丰富的快速构建网页的组件仓库；

第2章 ECMA6Script

2.1 ES6的介绍

ECMAScript 6，简称ES6，是JavaScript语言的一次重大更新。它于2015年发布，是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性，包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等，大大提升了JavaScript的开发体验。由于VUE3中大量使用了ES6的语法,所以ES6成为了学习VUE3的门槛之一。ES6对JavaScript的改进在以下几个方面：

更加简洁：ES6引入了一些新的语法，如箭头函数、模板字符串等，使代码更加简洁易懂；
更强大的功能：ES6引入了一些新的API、解构语法和迭代器等功能，从而使得JavaScript更加强大；
更好的适用性：ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序；

总的来说，ES6在提高JavaScript的核心语言特性和功能方面取得了很大的进展。由于ES6已经成为了JavaScript的标准，它的大多数新特性都已被现在浏览器所支持，因此现在可以放心地使用ES6来开发前端应用程序。

历史版本：

标准版本	发布时间	新特性
ES1	1997年	第一版 ECMAScript
ES2	1998年	引入setter和getter函数，增加了try/catch，switch语句允许字符串
ES3	1999年	引入了正则表达式和更好的字符串处理
ES4	取消	取消，部分特性被ES3.1和ES5继承
ES5	2009年	Object.defineProperty，JSON，严格模式，数组新增方法等
ES5.1	2011年	对ES5做了一些勘误和例行修订
`ES6`	`2015年`	`箭头函数、模板字符串、解构、let和const关键字、类、模块系统等`
ES2016	2016年	数组.includes，指数操作符（**），Array.prototype.fill等
ES2017	2017年	异步函数async/await，Object.values/Object.entries，字符串填充
ES2018	2018年	正则表达式命名捕获组，几个有用的对象方法，异步迭代器等
ES2019	2019年	Array.prototype.{flat，flatMap}，Object.fromEntries等
ES2020	2020年	BigInt、动态导入、可选链操作符、空位合并操作符
ES2021	2021年	String.prototype.replaceAll，逻辑赋值运算符，Promise.any等
… …

2.2 es6的变量和模板字符串

ES6 新增了let和const，用来声明变量，使用的细节上也存在诸多差异。

let 和var的差别：

1、let 不能重复声明；

2、let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里面访问；

3、let不会预解析进行变量提升；

4、let 定义的全局变量不会作为window的属性；

5、let在es6中推荐优先使用；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
        //1. 基本语法(let)
        // {
        //     let a = 1;
        //     console.log(a); //1
        // }
        // //console.log(a); //a is not defined

        // //2. 代码块内有效
        // {
        //     let a = 0;
        //     var b = 1;
        // }
        // console.log(a); //a is not defined
        // console.log(b); //1 
        
        // //3. 不能重复声明
        // var b = 3;
        // var b = 4;
        // let a = 1;
        // let a = 2;

        //4. 循环+定时任务使用let
        //js单线程模型,如果循环包裹了定时任务,定时任务会在遍历结束后执行!
        // for (var i = 0; i < 10; i++) {
        // setTimeout(function(){//省略了window.setTimeout
        //     console.log(i);
        // })
        // }
        // // 输出十个 10 
            
            
        // for (let j = 0; j < 10; j++) {
        // setTimeout(function(){
        //     console.log(j);
        // })
        // } //输出0-9

        //5. 不存在变量提升
        console.log(a);  //ReferenceError: a is not defined
        let a = "apple";
 
        console.log(b);  //undefined
        var b = "banana";
    </script>
    </body>
</html>

const和var的差异：

1、新增const和let类似，只是const定义的变量不能修改，声明一个只读变量

2、并不是变量的值不能改动，而是变量指向的那个内存地址所保存的数据不能改动；

其实 const 保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。此时，你可能已经想到，简单类型和复合类型保存值的方式是不同的。是的，对于简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了

<script>
    //1声明常量
    const PI = 3.1415926;
    PI=3.14 //报错
    //2.对应数组和对象元素修改，不算常量修改，修改值，不修改地址
    const TEAM = ['刘德华','张学友','郭富城'];
    TEAM.push('黎明');
    TEAM=[] // 报错
    console.log(TEAM)
</script>

模板字符串（template string）是增强版的字符串，用飘号，也叫反引号（`）标识。

1、字符串中可以出现换行符；

2、可以使用 ${xxx} 形式输出变量和拼接变量；

<script>
    // 1 多行普通字符串
    let ulStr =
        '<ul>'+
        '<li>JAVA</li>'+
        '<li>html</li>'+
        '<li>VUE</li>'+
        '</ul>'
    console.log(ulStr)    
    // 2 多行模板字符串
    let ulStr2 = `
        <ul>
        	<li>JAVA</li>
        	<li>html</li>
        	<li>VUE</li>
        </ul>`
    console.log(ulStr2)        
    // 3  普通字符串拼接
    let name ='张小明'
    let infoStr =name+'被评为本年级优秀学员'  
    console.log(infoStr)
    // 4  模板字符串拼接
    let infoStr2 =`${name}被评为本年级优秀学员`
    console.log(infoStr2)
</script>

2.3 es6的解构表达式

ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用花括号 {} 表示对象，方括号 [] 表示数组。通过解构赋值，函数更方便进行参数接受等！

数组解构赋值：

//1.数组模型的解构(快速获取数组数据)
let [a,b,c] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);
console.log("----------------")
//2.可嵌套数组处理
let [d,[f],g] = [1,[2],3];
console.log(d);
console.log(f);
console.log(g);
console.log("----------------")
//3.可忽略数组处理
let [h,i] = [1,2,3];
console.log(h);//1
console.log(i);//2
console.log("----------------")
let [j,,k] = [1,2,3];
console.log(j);//1
console.log(k);//3
console.log("----------------")
//4.解构默认值
let [l,m = 2] = [1];
console.log(l);
console.log(m);
console.log("----------------")
//5.剩余运算符
//...只能在最后
let [n,...o] = [1,2,3,4,5];
console.log(n); 
console.log(o); 
console.log("----------------")
//6.字符串解构
//在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值
let [aa,bb,cc,dd] = 'abcdf';
console.log(aa);
console.log(bb);
console.log(cc);
console.log(dd);
console.log("----------------")

对象解构赋值：

//7.对象模型解构
//解构的属性名必须等于对象属性名,否则无法对应
let {name,age} = {name:"aaa",age:18}
console.log(name);
console.log(age);
console.log("----------------")
//可以利用:起别名
let {name:ne,age:ae} = {name:"aaa",age:18};
console.log(ne);
console.log(ae);
console.log("----------------")
//8.对象解构嵌套和忽略
let obj = {p:['hello',{y:'world'}]};
let {p:[ff,{y:yy}]} = obj;
let obj1 = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj1;
//9.对象还剩余运算符
let {a:aaa, b:bbb, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// aaa = 10
// bbb = 20
// rest = {c: 30, d: 40}

函数参数解构赋值：

解构赋值也可以用于函数参数，例如：

function add([x, y]) {
  return x + y;
}
add([1, 2]);

该函数接受一个数组作为参数，将其中的第一个值赋给 x，第二个值赋给 y，然后返回它们的和；
ES6 解构赋值让变量的初始化更加简单和便捷。通过解构赋值，我们可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性；

2.4 es6的箭头函数

ES6 允许使用“箭头” 函数。语法类似Java中的Lambda表达式。

2.4.1 声明

<script>
    //ES6 允许使用“箭头”（=>）定义函数。
    //1. 函数声明
    //方式一
    function fun(){}
    //方式二：
    let fun1 = function(){}
    //针对方式二可以使用箭头函数
    let fun2 = ()=>{} //箭头函数,此处不需要书写function关键字
    let fun3 = x =>{} //单参数可以省略(),多参数无参数不可以!
    let fun4 = x => console.log(x) //只有一行方法体可以省略{};
    let fun5 = x => x + 1 //当函数体只有一句返回值时，可以省略花括号和 return 语句
</script>

2.4.2 参数默认值

<script>
    //声明一个求和的函数
    let sum = (a,b)=>{
        return a + b
    }
    //调用函数
    let result = sum(1,1)
    console.log(result); //2
    //少传一个参数
    let result1 = sum(1) 
    console.log(result1); //NaN

    //声明函数时设置默认值
    let sum1 = (a,b=1)=>{
        return a + b
    }
    //调用函数
    let result2 = sum1(1,2)
    console.log(result2); //3
    let result3 = sum1(1)
    console.log(result3); //2
    
</script>

2.4.3 三个点扩展运算符

用法一：作为可变参数

<script>
    // ... 作为参数列表,称之为rest参数 普通函数和箭头函数中都支持
    let fun = function (a,...args){
        console.log(a);
        console.log(args)
    }
    let fun1 = (a,...args) =>{
        console.log(args)
    }
    fun(1,2,3) //1赋值给a，2和3作为一个数组赋值给args
    fun1(1,2,3,4) //1赋值给a，2、3、4作为一个数组赋值给args
    // rest参数在一个参数列表中的最后一个值,这也就无形之中要求一个参数列表中只能有一个rest参数
    // let fun2 =  (...args,...args2) =>{} // 这里报错
</script>

用法二：复制数组和对象的属性

<script>
    //使用... 复制数组和对象的属性称为spread语法
    //应用场景1 合并数组
    let arr =[1,2,3]
    let arr2=[4,5,6]
    let arr3=[...arr,...arr2]
    console.log(arr3)
    //应用场景2 合并对象属性
    let p1={name:"张三"}
    let p2={age:10}
    let p3={gender:"boy"}
    let person ={...p1,...p2,...p3}
    console.log(person)
</script>

2.5 链判断

如果读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。

比如，读取emp.dept.name这个属性，安全的写法是写成下面这样:

let  emp = null
// 错误的写法
//const  empName = emp.dept.name|| 'default'

// 正确的写法
const empName = (emp
                   && emp.dept
                   && emp.dept.name || 'default')
console.log(empName)

这样的层层判断非常麻烦，因此 ES2020 引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法:

//let emp = null

let emp = {
    name:"张三",
    dept:{
        name:"教学部"
    }
}

const empName = emp?.dept?.name || 'default'

2.6 es6的模块化处理

2.6.1模块化介绍

模块化是一种组织和管理前端代码的方式，将代码拆分成小的模块单元，使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。前端模块化的主要优势如下：

提高代码可维护性：通过将代码拆分为小的模块单元，使得代码结构更为清晰，可读性更高，便于开发者阅读和维护；
提高代码可复用性：通过将重复使用的代码变成可复用的模块，减少代码重复率，降低开发成本；
提高代码可扩展性：通过模块化来实现代码的松耦合，便于更改和替换模块，从而方便地扩展功能；

目前，前端模块化有多种规范和实现，包括 CommonJS、AMD 和 ES6 模块化。ES6 模块化是 JavaScript 语言的模块标准，使用 import 和 export 关键字来实现模块的导入和导出。现在，大部分浏览器都已经原生支持 ES6 模块化，因此它成为了最为广泛使用的前端模块化标准.。

ES6模块化的几种暴露和导入方式：
1. 分别导出；
2. 统一导出；
3. 默认导出；
ES6中无论以何种方式导出,导出的都是一个对象,导出的内容都可以理解为是向这个对象中添加属性或者方法！！！

2.6.2 分别导出

1684461046181

module.js 向外分别暴露成员：

//1.分别暴露
// 模块想对外导出,添加export关键字即可!
// 导出一个变量
export const PI = 3.14
// 导出一个函数
export function sum(a, b) {
  return a + b;
}

app.js 导入module.js中的成员：

/* 
    *代表module.js中的所有成员
    m1代表所有成员所属的对象
*/
import * as m1 from './module.js'
// 使用暴露的属性
console.log(m1.PI)
// 调用暴露的方法
let result =m1.sum(10,20)
console.log(result)

index.html作为程序启动的入口，导入 app.js ：

1 2	<!-- 导入JS文件添加type='module' 属性,否则不支持ES6的模块化 --> <script src="./app.js" type="module" />

2.6.3 统一导出

1684461701620

module.js向外统一导出成员：

//2.统一暴露
// 模块想对外导出,export统一暴露想暴露的内容!
// 定义一个常量
const PI = 3.14
// 定义一个函数
function sum(a, b) {
  return a + b;
}
// 统一对外导出(暴露)
export {
	PI,
    sum
}

app.js导入module.js中的成员：

/* 
    {}中导入要使用的来自于module.js中的成员
    {}中导入的名称要和module.js中导出的一致,也可以在此处起别名
    {}中如果定义了别名,那么在当前模块中就只能使用别名
    {}中导入成员的顺序可以不是暴露的顺序
    一个模块中可以同时有多个import
    多个import可以导入多个不同的模块,也可以是同一个模块
*/
import {PI ,sum }  from './module.js'
import {PI as pi,sum as add}  from './module.js'
// 使用暴露的属性
console.log(PI)
console.log(pi)
// 调用暴露的方法
let result1 =sum(10,20)
console.log(result1)
let result2 =add(10,20)
console.log(result2)

2.6.4 默认导出

1684463528680

module.js中混合向外导出：

// 3.默认和混合暴露
/* 
    默认暴露语法  export default sum
    默认导出在一个模块中只能使用一次
    默认暴露相当于是在暴露的对象中增加了一个名字为default的属性
    三种暴露方式可以在一个module中混合使用
*/
export const PI = 3.14
// 导出一个函数
function sum(a, b) {
  return a + b;
}
// 导出默认
export default sum

app.js 的default和其他导入写法混用：

/* 
    *代表module.js中的所有成员
    m1代表所有成员所属的对象
*/
import * as m1 from './module.js'
import {default as add} from './module.js' // 用的少
import add2 from './module.js' // 等效于 import {default as add2} from './module.js'
// 调用暴露的方法
let result =m1.default(10,20)
console.log(result)
let result2 =add(10,20)
console.log(result2)
let result3 =add2(10,20)
console.log(result3)

// 引入其他方式暴露的内容
import {PI} from './module.js'
// 使用暴露的属性
console.log(PI)

第3章前端工程化环境搭建

3.1 Nodejs的介绍与安装

3.1.1 什么是Nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，可以使 JavaScript 运行在服务器端。使用 Node.js，可以方便地开发服务器端应用程序，如 Web 应用、API、后端服务，还可以通过 Node.js 构建命令行工具等。相比于传统的服务器端语言（如 PHP、Java、Python 等），Node.js 具有以下特点：

单线程，但是采用了事件驱动、异步 I/O 模型，可以处理高并发请求；
轻量级，使用 C++ 编写的 V8 引擎让 Node.js 的运行速度很快；
模块化，Node.js 内置了大量模块，同时也可以通过第三方模块扩展功能；
跨平台，可以在 Windows、Linux、Mac 等多种平台下运行；

Node.js 的核心是其管理事件和异步 I/O 的能力。Node.js 的异步 I/O 使其能够处理大量并发请求，并且能够避免在等待 I/O 资源时造成的阻塞。此外，Node.js 还拥有高性能网络库和文件系统库，可用于搭建 WebSocket 服务器、上传文件等。在 Node.js 中，我们可以使用 JavaScript 来编写服务器端程序，这也使得前端开发人员可以利用自己已经熟悉的技能来开发服务器端程序，同时也让 JavaScript 成为一种全栈语言。Node.js 受到了广泛的应用，包括了大型企业级应用、云计算、物联网、游戏开发等领域。常用的 Node.js 框架包括 Express、Koa、Egg.js 等，它们能够显著提高开发效率和代码质量。

3.1.2 如何安装Nodejs

打开官网https://nodejs.org/en下载对应操作系统的 LTS 版本。
双击安装包进行安装，安装过程中遵循默认选项即可(或者参照https://www.runoob.com/nodejs/nodejs-install-setup.html )。安装完成后，可以在命令行终端输入 node -v 和 npm -v 查看 Node.js 和 npm 的版本号。

定义一个app.js文件，文件内定义如下代码。cmd到该文件所在目录，然后在dos上通过node app.js命令即可运行。

1	console.log("测试Nodejs")

3.2 npm 配置和使用

3.2.1 npm介绍

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于后端的Maven的部分功能。

3.2.2 npm 安装和配置

1、安装：安装Nodejs，自动安装npm包管理工具！

2、配置依赖下载使用阿里镜像：

npm 安装依赖包时默认使用的是官方源，由于国内网络环境的原因，有时会出现下载速度过慢的情况。为了解决这个问题，可以配置使用阿里镜像来加速 npm 的下载速度，打开命令行终端，执行以下命令，配置使用阿里镜像：

1	npm config set registry https://registry.npmmirror.com

验证配置，查看当前 registry 的配置：如果输出结果为 https://registry.npmmirror.com，说明配置已成功生效。

1 2	npm config get registry npm config list

如果需要恢复默认的官方源，可以执行以下命令：

1	npm config set registry https://registry.npmjs.org/

3、配置全局依赖下载后存储位置：

在 Windows 系统上，npm 的全局依赖默认安装在 <用户目录>\AppData\Roaming\npm 目录下。
如果需要修改全局依赖的安装路径，可以按照以下步骤操作：
1. 创建一个新的全局依赖存储目录，例如 D:\GlobalNodeModules。
2. 打开命令行终端，执行以下命令来配置新的全局依赖存储路径：
  1
  npm config set prefix "D:\GlobalNodeModules"
3. 确认配置已生效，可以使用以下命令查看当前的全局依赖存储路径：
  1
  npm config get prefix

4、升级npm版本：

cmd 输入npm -v 查看版本，如果node中自带的npm版本过低！则需要升级至9.6.6！

1	npm install -g npm@9.6.6

3.2.3 npm 常用命令

1、项目初始化：

npm init
- 进入一个vscode创建好的项目中，执行 npm init 命令后，npm 会引导您在命令行界面上回答一些问题，例如项目名称、版本号、作者、许可证等信息，并最终生成一个package.json 文件。package.json信息会包含项目基本信息！类似maven的pom.xml。
npm init -y
- 执行，-y yes的意思，所有信息使用当前文件夹的默认值！不用挨个填写！

2、安装依赖 (查看所有依赖地址 https://www.npmjs.com )：

npm install 包名或者 npm install 包名@版本号
- 安装包或者指定版本的依赖包(安装到当前项目中)。
npm install -g 包名
- 安装全局依赖包(安装到d:/GlobalNodeModules)则可以在任何项目中使用它，而无需在每个项目中独立安装该包。
npm install
- 安装package.json中的所有记录的依赖。

3、升级依赖：

npm update 包名
- 将依赖升级到最新版本。

4、卸载依赖：

npm uninstall 包名

5、查看依赖：

npm ls
- 查看项目依赖。
npm list -g
- 查看全局依赖。

6、运行命令：

npm run 命令是在执行 npm 脚本时使用的命令。npm 脚本是一组在 package.json 文件中定义的可执行命令。npm 脚本可用于启动应用程序，运行测试，生成文档等，还可以自定义命令以及配置需要运行的脚本。
在 package.json 文件中，scripts 字段是一个对象，其中包含一组键值对，键是要运行的脚本的名称，值是要执行的命令。例如，以下是一个简单的 package.json 文件：

package.json 是每个 npm 项目的基础配置文件，它定义了项目的依赖关系、版本号、入口脚本、包的元数据等信息。
一个基本的 package.json 文件包含以下字段：
	name: 包名
	version: 版本号，遵循语义化版本控制（Semantic Versioning）
	description: 包的描述
	main: 入口点脚本文件，通常是启动时加载的文件
	scripts: 定义运行脚本的脚本命令
	dependencies: 生产环境依赖
	devDependencies: 开发环境依赖
	repository: 代码仓库地址
	keywords: 关键词数组，有助于 npm 搜索
	author: 作者信息
	license: 许可证

    {
    "name": "example-package",  //软件名
    "version": "1.0.0",         //定义版本
    "description": "A sample npm package", //软件描述
    "main": "index.js",  //启动执行的js文件
    "scripts": {  //指定运行脚本
        "test": "echo \"Error: no test specified\" && exit 1" // npm run test 执行内部的测试输出命令
    },
        maven / 依赖 / scope / compile 全程需要 | runtime 写代码时候无法使用,运行才会有 mysql | provided main test 打包以后不使用 [[servlet]] | test  junit
    "dependencies": (compile) {  //生产环境依赖
        "express": "4.17.1", #准确版本
        "express": "^4.17.1" #大版本必须4 锁住大版本
    },
    "devDependencies":(provided) { //开发环境依赖 
        "nodemon": "^2.0.7"
    },
    "repository": { //git仓库
        "type": "git",
        "url": "git+https://github.com/username/example-package.git"
    },
    "keywords": ["example", "npm"], //npm搜索关键字
    "author": "Your Name", //作者名字
    "license": "ISC" //许可证
    }

### 环境依赖配置
    dependencies 生产环境依赖 (compile)
    devDependencies 开发环境依赖  (provided)
	当你执行 npm install（没有额外参数时）时，dependencies 会被自动安装。
    当你执行 npm install --production 或者设置环境变量为 NODE_ENV=production 时，devDependencies 会被忽略，只会安装 dependencies 中的依赖。
### name

    name 是指软件包名。
    命名规则：
    名称必须小于或等于 214 个字符。这包括范围软件包的范围。
    作用域软件包的名称可以以点或下划线开头。如果没有作用域，则不允许这样做。
    新软件包名称中不能有大写字母。
    名称最终会成为 URL、命令行参数和文件夹名称的一部分。因此，名称中不能包含任何非 URL 安全字符。
    名称可选择以作用域作为前缀，例如 @myorg/mypackage。
    提示：
    不要使用与 Node 核心模块相同的名称。
    不要在名称中使用 "js "或 “node”。因为你编写的是 package.json 文件，所以我们假定它是 js，你可以使用 "引擎 "字段指定引擎。(见下文）。
    该名称可能会作为参数传递给 require()，因此应该简短，但也要有合理的描述性。
    你可能需要检查一下 npm 注册表，看看是否已经有使用该名称的软件，以免过于依赖它。https://www.npmjs.com/
    这是发布包的注意事项，如果你的项目不准备分享发布，则无所谓，建议和你项目相同。

### version

    指发布包版本号,x.x.x的形式。
    版本必须能被 node-semver 解析，node-semver 作为依赖项与 npm 捆绑。(npm install semver 可自行使用）。
    命名版本号建议遵循版本语义规范,：

### description

    项目描述。
    这是一个字符串。这有助于人们发现你的软件包，因为它会在 npm 搜索中列出。

### keywords

    项目关键字。
    这是一个字符串数组。这有助于人们在 npm 搜索中发现你的软件包。

### scripts

    运行命令集合（字典）
    脚本 "属性是一个字典，包含在软件包生命周期的不同时间运行的脚本命令。键是生命周期事件，值是在该时刻运行的命令。

    package.json 文件的 "scripts "属性支持大量内置脚本、预设生命周期事件以及任意脚本。这些脚本都可以通过运行 npm run-script 或 npm run 来执行。名称匹配的前置和后置命令也会被执行（例如 premyscript、myscript、postmyscript）。使用 npm explore – npm run 可以运行来自依赖项的脚本。
    例如：
    {
        "scripts": {
            "precompress": "{{ executes BEFORE the `compress` script }}",
            "compress": "{{ run command to compress files }}",
            "postcompress": "{{ executes AFTER `compress` script }}"
        }
    }

    npm run compress 就会执行compress后面对应的命令!

scripts 对象包含 start、test 和 build 三个脚本。当您运行 npm run start 时，将运行 node index.js，并启动应用程序。同样，运行 npm run test 时，将运行 Jest 测试套件，而 npm run build 将运行 webpack 命令以生成最终的构建输出。
总之，npm run 命令为您提供了一种在 package.json 文件中定义和管理一组指令的方法，可以在项目中快速且灵活地运行各种操作。

第4章 Vue3框架

4.1 Vue3简介

4.1.1 Vue3介绍

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网为:https://cn.vuejs.org/

Vue的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系；
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM ；

VUE作者:尤雨溪

尤雨溪（Evan You），毕业于科尔盖特大学，前端框架Vue.js的作者、HTML5版Clear的打造人、独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的JavaScript项目，最后自己也走上了开源之路，现全职开发和维护Vue.js；
尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab；
尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript，从此被这门编程语言深深吸引，开启了自己的前端生涯；

4.1.2 Vue3快速体验(非工程化方式)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3初体验（非工程化方式）</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">
        <h1>{{ message }}</h1>
        <p v-text="message"></p>
    </div>

    <script>
        //1.初始化
        const app = Vue.createApp({
            setup() {
                let message = "Hello Vue3"
                return {
                    message
                }
            }
        })
        //2.挂载
        app.mount("#app")
    </script>

</html>

更完整的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3完整流程</title>
</head>
<body>
    <!-- 第一步：准备HTML模板 -->
    <div id="app">
        <h1>{{ title }}</h1>
        <p>计数器: {{ count }}</p>
        <button @click="increment">点击+1</button>
    </div>

    <!-- 第二步：引入Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
        // 第三步：创建Vue应用
        const app = Vue.createApp({
            setup() {
                // 数据
                let count = 0
                let title = "我的Vue应用"
                
                // 方法
                function increment() {
                    count++
                }
                
                // 返回给模板使用
                return {
                    count,
                    title,
                    increment
                }
            }
        })

        // 第四步：挂载到DOM
        app.mount("#app")
    </script>
</body>
</html>

4.2 Vue3通过Vite实现工程化

4.2.1 Vite的介绍

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长；
包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感；

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。https://cn.vitejs.dev/guide/why.html。前端工程化的作用包括但不限于以下几个方面：

快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操作，从而节省时间和精力；
统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让不同开发者在同一个项目上编写出风格一致的代码，提高协作效率和质量；
代码模板和组件库：前端脚手架可以包含一些常用的代码模板和组件库，使开发者在实现常见功能时不再重复造轮子，避免因为轮子质量不高带来的麻烦，能够更加专注于项目的业务逻辑；
自动化构建和部署：前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等；

4.2.2 Vite创建Vue3工程化项目

1、Vite+Vue3项目的创建、启动、停止

1 使用命令行创建工程。

在磁盘的合适位置上，创建一个空目录用于存储多个前端项目；
用vscode打开该目录；
在vscode中打开命令行运行如下命令；

1	npm create vite

第一次使用Vite时会提示下载vite，输入y回车即可，下次使用Vite就不会出现了；

注意：输入项目名称vue3-demo，选择Vue+JavaScript选项即可；

2 安装项目所需依赖：

cd进入刚刚创建的项目目录；
npm install命令安装基础依赖；

1 2	cd ./vue3-demo npm install

3 启动项目：

查看项目下的package.json

{
  "name": "vue3-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap": "^5.2.3",
    "sass": "^1.62.1",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.3.2"
  }
}

1	npm run dev

5 停止项目：

命令行上 ctrl+c

2、Vite+Vue3项目的目录结构

1.下面是 Vite 项目结构和入口的详细说明：

public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。
src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：
1. assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。
2. components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。
3. layouts/ 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。
4. pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。
5. plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。
6. router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。
7. store/ 目录：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率。
8. utils/ 目录：用于存放一些通用的工具函数，如日期处理函数、字符串操作函数等。
vite.config.js 文件：Vite 的配置文件，可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行配置。
package.json 文件：标准的 Node.js 项目配置文件，包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令，如 dev、build、serve 等，用于启动开发、构建和启动本地服务器等操作。
Vite 项目的入口为 src/main.js 文件，这是 Vue.js 应用程序的启动文件，也是整个前端应用程序的入口文件。在该文件中，通常会引入 Vue.js 及其相关插件和组件，同时会创建 Vue 实例，挂载到 HTML 页面上指定的 DOM 元素中。

2.vite的运行界面：

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：(package.json)。

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

运行设置端口号：(vite.config.js)。

//修改vite项目配置文件 vite.config.js
export default defineConfig({
  plugins: [vue()],
  server:{
    port:3000
  }
})

3、Vite+Vue3项目组件(SFC入门)

什么是VUE的组件?

一个页面作为整体，是由多个部分组成的，每个部分在这里就可以理解为一个组件；
每个.vue文件就可以理解为一个组件，多个.vue文件可以构成一个整体页面；
组件化给我们带来的另一个好处就是组件的复用和维护非常的方便；

什么是.vue文件?

传统的页面有html文件css文件和js文件三个文件组成(多文件组件) ；
vue将这文件合并成一个vue文件(Single-File Component，简称 SFC，单文件组件)；整个项目叫SPA（single page application）
vue文件对js/css/html统一封装，这是VUE中的概念，该文件由三个部分组成 <script> <template> <style>；我们主要写的是<script> html部分Elementplus可以解决如果不会问ai嘛
- template标签代表组件的html部分代码，代替传统的html文件；
- script标签代表组件的js代码，代替传统的js文件；
- style标签代表组件的css样式代码，代替传统的css文件；

工程化vue项目如何组织这些组件?

index.html是项目的入口，其中 <div id ='app'></div>是用于挂载所有组建的元素；
index.html中的script标签引入了一个main.js文件，具体的挂载过程在main.js中执行；
main.js是vue工程中非常重要的文件，他决定这项目使用哪些依赖，导入的第一个组件；（控制布局）
App.vue是vue中的核心组件，所有的其他组件都要通过该组件进行导入，该组件通过路由可以控制页面的切换；

4、Vite+Vue3响应式入门和setup函数

1 删除App.vue中自带的内容

<script>
    //存储vue页面逻辑js代码
</script>
<template>
    <!-- 页面的样式的是html代码  至少需要一个元素不然会报错-->
</template>
<style scoped>
    /** 存储的是css代码! <style scoped> 是 Vue.js 单文件组件中用于设置组件样式的一种方式。
    它的含义是将样式局限在当前组件中，不对全局样式造成影响。 */
</style>

2 Vue3响应式数据入门：

<script type="module">
    //存储vue页面逻辑js代码
    import {ref} from 'vue'
    export default{
        setup(){
            //非响应式数据: 修改后VUE不会更新DOM
            //响应式数据:   修改后VUE会更新DOM
            //VUE2中数据默认是响应式的
            //VUE3中数据要经过ref或者reactive处理后才是响应式的
            //ref是VUE3框架提供的一个函数,需要导入
            //let counter = 1
            //ref处理的响应式数据在js编码修改的时候需要通过.value操作
            //ref响应式数据在绑定到html上时不需要.value
            let counter = ref(1)
            function increase(){
                // 通过.value修改响应式数据
                counter.value++
            }
            function decrease(){
                counter.value--
            }
            return {
                counter,
                increase,
                decrease
            }
        }
    }
</script>
<template>
    <div>
      <button @click="decrease()">-</button>
      {{ counter }}
      <button @click="increase()">+</button>
    </div>
</template>
<style scoped>
    button{
        border: 1px solid red;
    }
</style>

3 Vue3 setup函数和语法糖：

位置：src/App.vue。

<!-- 组合式API编程模板-->
<script type="module" setup>   
/* 通过setup关键字，可以省略 export default {setup(){   return{}}}这些冗余的语法结构 */
    import {ref} from 'vue'
    // 定义响应式数据
    let counter = ref(1)
    // 定义函数
    function increase(){
        counter.value++ //如果使用ref()声明响应式变量 js代码注意必须要加.value  指令或者插值表达式不用加
    }
    function decrease(){
        counter.value--
    }  
</script>
<template>
    <div>
      <button @click="decrease()">-</button>
      {{ counter }}
      <button @click="increase()">+</button>
    </div>
</template>
<style scoped>
    button{
        border: 1px solid red;
    }
</style>

<script setup>
// 导入ref函数 响应式变量
import { ref } from 'vue'

//let counter = 1;//不是响应式的
let counter = ref(1);

</script>

<template>
  <div>
    <button @click="counter--">-</button>
    =========={{ counter }}==========
    <button @click="counter++">+</button>
  </div>
</template>

<style scoped>
button {
  border: 1px solid red;
}
</style>

5、Vite+Vue3关于样式的导入方式

全局引入main.js；针对所有的vue页面生效

1	import './style/reset.css' //书写引入的资源的相对路径即可！

vue文件script代码引入；
1
import './style/reset.css'
Vue文件style代码引入；[不推荐]
1
@import './style/reset.css';

6、vscode中创建vue3SFC模版

vscode点击设置
搜索vue.json配置参数

添加vue3 SFC模板代码

{
	"Print to console": {
		"prefix": "sfc",  //键入该值，按tab快捷产生
		"body": [
			"<script setup>",
			"",
			"</script>",
			"",
			"<template>",
			"  <div>",
			"",
			"  </div>",
			"</template>",
			"",
			"<style scoped>",
			"",
			"</style>",
		],
		"description": "vue3的sfc模板"
	}
}

使用vue3模板
1
vue -> sfc + tab即可

4.3 Vue3视图渲染技术

4.3.1 模版语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

1、插值表达式和文本渲染

插值表达式：最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法，即双大括号{{}}：

插值表达式是将数据渲染到元素的指定位置的手段之一；
插值表达式不绝对依赖标签，其位置相对自由；
插值表达式中支持javascript的运算表达式；
插值表达式中也支持函数的调用；

<script setup>
   let age = 18
   let message = "测试插值表达式"
   //声明一个函数
   let getAddress = ()=>{
    return "宏福苑小区"
   }
</script>

<template>
    {{ message }}
   <h1>{{ message }}</h1>
   <p>{{ message }}</p>
   <span style="color: red;">{{ message }}</span>
   <h1>你成年了吗：{{ age>=18?"已成年":"未成年"}}</h1>
   <h1>你的居住地：{{ getAddress() }}</h1>
</template>

<script setup>
let message = '永远不停止与这个世界对抗!'
let age = 15
let getAddress = () => {
  return '中国'
}
</script>

<template>
  <div>
    <h2>{{ message }}</h2>

    <h3 v-text="message"></h3>

    <h2>{{ age >= 18 ? '成年啦！' : "未成年" }}</h2>

    <h3>{{ getAddress() }}</h3>
  </div>
</template>

<style scoped></style>

为了渲染双标中的文本，我们也可以选择使用v-text和v-html命令：

v-*** 这种写法的方式使用的是vue的命令；
v-***的命令必须依赖元素，并且要写在元素的开始标签中；
v-***指令支持ES6中的模板字符串；
插值表达式中支持javascript的运算表达式；
插值表达式中也支持函数的调用；
v-text可以将数据渲染成双标签中间的文本，但是不识别html元素结构的文本；
v-html可以将数据渲染成双标签中间的文本，识别html元素结构的文本；

<script setup>
    let message = "测试文本渲染"
    let msg = "<font color='red'>我要红</font>"
</script>

<template>
    <h1 v-text="message"></h1>
    <h1 v-html="message"></h1>
    <p v-text="message"></p>
    <span style="color: red;" v-text="message"></span>
    <!-- 测试v-text和v-html的区别 -->8
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</template>

2、Attribute属性渲染

想要渲染一个元素的 attribute，应该使用 v-bind指令。

由于插值表达式不能直接放在标签的属性中，要渲染元素的属性就应该使用v-bind；
v-bind可以用于渲染任何元素的属性，语法为 v-bind:属性名='数据名'，可以简写为 :属性名='数据名'；

<script setup>
  //声明数据
  let data = "测试属性渲染"
  let link = "http://www.yutao.com"
</script>

<template>
  <!-- 完整写法 -->
  <input v-bind:value="data"></input><br>
  <!-- 简写 -->
  <input :value="data"></input><br>
  <div :id="data">我是div标签，我的id属性是通过Vue渲染的</div>
  <a :href="link">点我有惊喜</a>

	<!-- 3.4+新特性 如果 attribute 的名称与绑定的 JavaScript 值的名称相同，那么可以进一步简化语法，省略 attribute 值：-->
  <!-- 与 :id="id" 相同 -->
	<div :id></div>
	<!-- 这也同样有效 -->
	<div v-bind:id></div>
</template>

3、事件的绑定

我们可以使用 v-on 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。

用法：v-on:click="handler" 或简写为 @click="handler"；
vue中的事件名=原生事件名去掉on 前缀如:onClick --> click；
handler的值可以是方法事件处理器，也可以是内联事件处理器；
绑定事件时，可以通过一些绑定的修饰符，常见的事件修饰符如下：
- .once：只触发一次事件。[重点]；
- .prevent：阻止默认事件。[重点]，例如：a标签添加阻止默认事件，就不触发href属性对应的地址了；

<script setup>
  import { ref } from 'vue'
  //声明数据
  let count = ref(0)
  //add函数
  let add = () => {
    //对count加1
    count.value++
  }
  //sub函数
  let sub = () => {
    //对count加1
    count.value--
  }
  //changeData函数
  let changeData = () => {
    console.log("文本框中的内容发生了变化")
  }
  //blurF函数
  let blurF = () => {
    console.log("文本框中失去了焦点")
  }

  //创建一个取消默认行为的函数
  let stopDef = (event) => {
    //阻止事件（取消默认行为）
    event.preventDefault()
  }
</script>

<template>
  <button v-on:click="add">➕</button>
  {{ count }}
  <button @click="sub">➖</button><br>
    
    <!-- 文本框改变事件 -->
  给文本框绑定内容改变的事件：<input @change="changeData"></input><br>
  给文本框绑定失去焦点的事件：<input @blur="blurF"></input><br>
  <!-- 让单击事件只执行一次 -->
  <button @click.once="count++">count只会被加一次</button><br>
  <!-- 阻止事件（取消默认行为） -->
  <a href="http://www.u.com" target="_blank" @click.prevent="">官网</a><br>
  <!-- 使用原生JS代码阻止事件（取消默认行为） -->
  <a href="http://www..com" target="_blank" @click="stopDef($event)">官网</a>
</template>

<script setup>
import { ref } from 'vue'
let message = ref('请输入姓名')
let changeData = (data) => {
  message.value = data
}

let blurInput = (event) => {
  message.value = event.target.value

}
</script>

<template>
  <div>
    姓名:{{ message }}
    <input :value="message" @change="changeData($event.target.value)"> <!-- 输入完得按一下回车 -->

    《输入框失去焦点时触发》
    <input :value="message" @blur="blurInput"> {{ message }}


    <br>
    只能触发一次
    抽奖的场景可以使用

    阻止链接跳转
  </div>
</template>

<style scoped></style>

<template>
  <div style="padding: 20px;">
    <h2>Vue3 事件处理详解</h2>
    
    <!-- 1. 文本框改变事件 -->
    <div style="margin: 20px 0; padding: 10px; border: 1px solid #ccc;">
      <h3>文本框事件</h3>
      <p>输入的值：{{ inputValue }}</p>
      
      <!-- @change 事件：内容改变且失去焦点时触发 -->
      <label>change事件（失去焦点才触发）：</label>
      <input @change="handleChange" placeholder="输入后点击别处">
      <br><br>
      
      <!-- @blur 事件：失去焦点时触发 -->
      <label>blur事件（失去焦点就触发）：</label>
      <input @blur="handleBlur" placeholder="失去焦点时触发">
      <br><br>
      
      <!-- @input 事件：实时输入触发 -->
      <label>input事件（实时触发）：</label>
      <input @input="handleInput" placeholder="实时输入触发">
    </div>

    <!-- 2. 按钮点击事件 -->
    <div style="margin: 20px 0; padding: 10px; border: 1px solid #ccc;">
      <h3>按钮事件</h3>
      <p>计数器：{{ count }}</p>
      
      <!-- 普通点击事件 -->
      <button @click="increment">普通点击（每次+1）</button>
      
      <!-- .once 修饰符：只执行一次 -->
      <button @click.once="count++">只执行一次（只会+1一次）</button>
      
      <!-- .stop 修饰符：阻止事件冒泡 -->
      <div @click="parentClick" style="background: lightblue; padding: 20px;">
        父级容器（点击我）
        <button @click="childClick">子级按钮（点击我）</button>
        <button @click.stop="childClickStop">阻止冒泡的按钮</button>
      </div>
    </div>

    <!-- 3. 链接事件处理 -->
    <div style="margin: 20px 0; padding: 10px; border: 1px solid #ccc;">
      <h3>链接事件</h3>
      
      <!-- .prevent 修饰符：阻止默认行为 -->
      <p><a href="https://www.baidu.com" @click.prevent="handleLink">阻止跳转的链接</a></p>
      
      <!-- 不阻止默认行为 -->
      <p><a href="https://www.baidu.com" @click="handleLinkWithDefault">正常跳转的链接</a></p>
      
      <!-- 使用原生JS阻止默认行为 -->
      <p><a href="https://www.baidu.com" @click="stopDefault($event)">JS阻止跳转</a></p>
    </div>

    <!-- 4. 键盘事件 -->
    <div style="margin: 20px 0; padding: 10px; border: 1px solid #ccc;">
      <h3>键盘事件</h3>
      <p>按下的键：{{ pressedKey }}</p>
      
      <!-- .enter 修饰符：只在回车键时触发 -->
      <input @keyup.enter="handleEnter" placeholder="按回车键试试">
      
      <!-- 监听所有按键 -->
      <input @keyup="handleKeyup" placeholder="按任意键试试">
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const inputValue = ref('')
const count = ref(0)
const pressedKey = ref('')

// 文本框事件处理函数
function handleChange(event) {
  console.log('change事件触发:', event.target.value)
  inputValue.value = event.target.value
  alert('change事件：内容改变了！')
}

function handleBlur(event) {
  console.log('blur事件触发:', event.target.value)
  alert('blur事件：失去焦点了！')
}

function handleInput(event) {
  console.log('input事件触发:', event.target.value)
  inputValue.value = event.target.value
}

// 按钮事件处理函数
function increment() {
  count.value++
  console.log('计数器:', count.value)
}

function parentClick() {
  console.log('父级被点击了')
  alert('父级容器被点击')
}

function childClick() {
  console.log('子级被点击了')
  alert('子级按钮被点击')
}

function childClickStop() {
  console.log('阻止冒泡的按钮被点击')
  alert('这个按钮点击不会冒泡到父级')
}

// 链接事件处理函数
function handleLink() {
  console.log('链接被点击，但被阻止了跳转')
  alert('链接被点击，但不会跳转！')
}

function handleLinkWithDefault() {
  console.log('链接被点击，会正常跳转')
  alert('链接被点击，即将跳转！')
}

function stopDefault(event) {
  console.log('使用JS阻止默认行为')
  event.preventDefault() // 阻止默认行为
  alert('使用JS阻止了跳转！')
}

// 键盘事件处理函数
function handleEnter() {
  console.log('按下了回车键')
  alert('你按下了回车键！')
}

function handleKeyup(event) {
  pressedKey.value = event.key
  console.log('按下的键:', event.key)
}
</script>

<style scoped>
input, button {
  margin: 5px;
  padding: 5px;
}

button {
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #369870;
}
</style>

4.3.2 响应式基础

此处的响应式是指：数据模型（自定义的变量、对象）发生变化时，自动更新DOM树内容，页面上显示的内容会进行同步变化。vue3的数据模型不是自动响应式的，需要我们做一些特殊的处理。

1、如何实现响应式

使用ref或reactive函数就可以将基本类型的数据（如字符串，数字等）和引用类型的数据（如对象）转换为一个响应式对象。

<script setup>
import { ref,reactive } from 'vue'
/*
  响应式概念：在 Vue.js 中，响应式是一个核心概念，旨在实现数据和视图的自动同步。当你更改数据时，视图会自动更新，而不需要手动操作 DOM。这种机制使得开发者能够更加专注于业务逻辑，而不必关注视图的更新。
  vue版本区别：Vue2中所有的数据默认是响应式、在Vue3中JS中声明的数据默认不是响应式的，需要使用ref或reactive函数包装一下就变成了响应式的，包装之后就变成了ref对象或reactive对象.
  ref函数和reactive函数的区别：
      1.ref函数可以包装基本类型（字符串、数字,对象）和引入类型（数组、对象）；reactive只能包装引用类型
      2.使用ref包装的数据在JS中修改或获取的时候需要加.value，在DOM中不用添加.value（template可以直接操作）；
        用reactive包装的数据在JS和DOM中都不需要添加.value
      3.使用ref包装的对象，对象和对象的属性都是响应式的；使用reactive包装的对象，对象不是响应式的，对象的属性是响应式的（不能做对象替换）
*/
//包装基本类型
let count = ref(56)
let totalCount = reactive(566) //不推荐 

//包装引用类型
let obj = ref({
  name:"蔡徐坤",
  age:33
})
let obj2 = reactive({
  name:"吴亦凡",
  age:38
})


//声明函数
let changeCount = ()=>{
  count.value = 58   //修改值 可以响应式回显数据
}
let changeTotalCount = ()=>{
  totalCount = 588   //值修改 不能响应式更改数据
}
let changeObj = ()=>{
  obj.value = {
    name:"李易峰",
    age:35
  }
}
let changeObj2 = ()=>{
  obj2 = {     // reactive声明对象引用，可以修改对象属性值 但是不能更改对象本身的地址
    name:"PGOne",
    age:32
  }
}
let changeObjAttr = ()=>{
  obj.value.name = "蔡大使"
}
let changeObj2Attr = ()=>{
  obj2.name = "吴签"
}
</script>

<template>
  <h2>班级总人数：{{ count }}</h2>
  <h2>全校总人数：{{ totalCount }}</h2>
  <h2>使用ref函数包装的对象：{{ obj }}</h2>
  <h2>使用reactive函数包装的对象：{{ obj2 }}</h2>
  <button @click="changeCount">改变ref包装的基本类型</button><br>
  <button @click="changeTotalCount">改变reactive包装的基本类型</button><br>
  <button @click="changeObj">改变ref包装的对象</button><br>
  <button @click="changeObj2">改变reactive包装的对象</button><br>
  <button @click="changeObjAttr">改变ref包装的对象的属性值</button><br>
  <button @click="changeObj2Attr">改变reactive包装的对象的属性值</button><br>
</template>

2、ref与reactive的区别

ref函数可以包装基本类型（字符串、数字）和引用类型（数组、对象）；reactive只能包装引用类型
使用ref包装的数据在JS中修改或获取的时候需要加.value，在DOM（template标签内）中不用添加.value；用reactive包装的数据在JS和DOM中都不需要添加.value
使用ref包装的对象，对象和对象的属性都是响应式的；使用reactive包装的对象，对象不是响应式的，对象的属性是响应式的

4.3.2 条件和列表渲染

1、条件渲染

v-if 条件渲染：

v-if='表达式' 只会在指令的表达式返回真值时才被渲染
也可以使用 v-else 为 v-if 添加一个“else 区块”。
一个 v-else 元素必须跟在一个 v-if 元素后面，否则它将不会被识别。

<script setup>
//声明数据
let age = 16
</script>

<template>
  <div v-if="age >= 18">已成年</div>
  <div v-else>小屁孩儿</div>
</template>

v-show条件渲染扩展：

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样；
不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性；
v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用；

<script setup>
//声明数据
let age = 16
</script>

<template>
  <div v-if="age >= 18">已成年</div>
  <div v-else>小屁孩儿</div>
  <div v-show="age >= 18">成年人</div>
  <div v-show="age < 18">儿童</div>
</template>

v-if vs v-show：

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建；
v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染；
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换；
总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适；

2、列表渲染

我们可以使用 v-for 指令基于一个数组来渲染一个列表：

v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名；
在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引；

<script setup>
//声明数据
let userArray = []

let userArray2 = [
  {id:1,name:"迪丽热巴",age:30},
  {id:2,name:"古力娜扎",age:28},

  {id:4,name:"马蓉",age:40},
  {id:5,name:"李小璐",age:33},
  {id:6,name:"杨颖",age:34}
]
</script>

<template>
  <div v-if="userArray2.length==0">
    <h1>没有任何用户</h1>
  </div>
  <div v-else>
    <h1>用户列表</h1>
    <table border="1" cellpadding="20" cellspacing="0" >
      <tr>
        <th>序号</th>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th colspan="2">操作</th>
      </tr>
      <tr v-for="(user,index) in userArray2">
         <td>{{ index }}</td> 
         <td v-text="user.id"></td>
         <td>{{ user.name }}</td>
         <td>{{ user.age }}</td>
         <td>
          <a href="#">编辑</a>
         </td>
         <td>
          <a href="#">删除</a>
         </td>
      </tr>
    </table>
  </div>
</template>

4.3.3 双向绑定

单项绑定和双向绑定：

单向绑定：响应式数据的变化会更新dom树，但是dom树上用户的操作造成的数据改变不会同步更新到响应式数据；
双向绑定：响应式数据的变化会更新dom树，但是dom树上用户的操作造成的数据改变会同步更新到响应式数据；
- 用户通过表单标签才能够输入数据，所以双向绑定都是应用到表单标签上的，其他标签不行；
- v-model专门用于双向绑定表单标签的value属性，语法为 v-model:value=''，可以简写为 v-model=''；
- v-model还可以用于各种不同类型的输入，<textarea>、<select> 元素；

<script setup>
import { ref } from 'vue'
//声明数据
let data = ref("测试双向的数据绑定")
//修改JS中的data的函数
let changeData = ()=>{
  data.value = "新值"
}
</script>

<template>
  <h1>{{ data }}</h1>
  <!-- 单向数据绑定 -->
  测试单向数据绑定：<input v-bind:value="data"></input><br>
  <!-- 双向的数据绑定 -->
  测试双向数据绑定：<input v-model="data"></input><br>
  <button @click="changeData">点击修改JS中的数据</button>
</template>

4.3.4 Vue生命周期

1、生命周期简介

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码!

周期图解：

常见钩子函数：
- onMounted() 注册一个回调函数，在组件挂载完成后执行；
- onUpdated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用；
- onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用；
- onBeforeMount() 注册一个钩子，在组件被挂载之前被调用；
- onBeforeUpdate() 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用；
- onBeforeUnmount() 注册一个钩子，在组件实例被卸载之前调用；

2、生命周期案例

<script setup>
    import {ref,onUpdated,onMounted,onBeforeUpdate} from 'vue'
    let message =ref('hello')   
    // 挂载完毕生命周期
    onMounted(()=>{
      console.log('-----------onMounted---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新前生命周期
    onBeforeUpdate(()=>{
      console.log('-----------onBeforeUpdate---------')
      console.log(message.value)
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新完成生命周期
    onUpdated(()=>{
      console.log('-----------onUpdated---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
</script>
<template>
  <div>
    <span id="span1" v-text="message"></span> <br>
    <input type="text" v-model="message">
  </div>
</template>
<style scoped>
</style>

4.3.5 Vue组件基础

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。组件就是实现应用中局部功能代码和资源的集合！在实际应用中，组件常常被组织成层层嵌套的树状结构：

这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

传统方式编写应用：

组件方式编写应用：

组件化：对js/css/html统一封装，这是Vue中的概念；
模块化：对js的统一封装,这是ES6中的概念；
组件化中，对js部分代码的处理使用ES6中的模块化；

4.3.6 Vue组件之间传递数据（了解）

1、父传子

Vue3 中父组件向子组件传值可以通过 props 进行，具体操作如下：

需要在子组件定义要接收的数据和参数


# 语法1: 数组方案声明
defineProps(['foo'])

# 语法2: 对象形式声明
// 使用 <script setup>
defineProps({
  title: String,
  likes: Number
})
# 对于以对象形式声明的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是 number 类型，则可使用 Number 构造函数作为其声明的值。
# 对象形式声明可以添加参数校验 https://cn.vuejs.org/guide/components/props.html#prop-validation
# 校验选项中的 type 可以是下列这些原生构造函数：
	String
	Number
	Boolean
	Array
	Object
	Date
	Function
	Symbol
	Error

获取数据：
  方案1：defineProps(['foo']) ｜ defineProps({title: String})  直接使用声明属性名即可 {{foo | title}}
  方案2：let pops = defineProps(['foo'])｜let pops =  defineProps({title: String}) 直接使用声明属性名即可 {{pops.foo | pops.title}}
  方案3：let {foo} = defineProps(['foo'])｜let {title} =  defineProps({title: String}) 直接使用声明属性名即可 {{foo | title}}

父组件使用子组件时进行赋值即可

静态传参：
	声明接收
	defineProps({
  	greetingMessage: String
	})
	参数传递
	<MyComponent greeting-message="hello" />
	理论上你也可以在向子组件传递 props 时使用 camelCase 形式，但实际上为了和 HTML attribute 对齐，通常会将其写为 kebab-case 形式！
动态参数：
  相应地，还有使用 v-bind 或缩写 : 来进行动态绑定的 props
  <!-- 根据一个变量的值动态传入 -->
  <BlogPost :title="post.title" />
  <!-- 根据一个更复杂表达式的值动态传入 -->
  <BlogPost :title="post.title + ' by ' + post.author.name" />

父组件代码：App.vue

<script setup>
  import Son from './components/Son.vue'
  import {ref,reactive,toRefs} from 'vue'
  let message = ref('parent data!')
  let title = ref(42)
  function changeMessage(){
    message.value = '修改数据！'
    title.value++
  }
</script>
<template>
  <div>
    <h2>{{ message }}</h2>
    <hr>
    <!-- 使用子组件，并且传递数据！ -->
    <Son :message="message" :title="title"></Son>
    <hr>
    <button @click="changeMessage">点击更新</button>
  </div>
</template>
<style scoped>
</style>

子组件代码：Son.vue

<script setup type="module">
    import {ref,isRef,defineProps} from 'vue'
    //声明父组件传递属性值
    defineProps({
        message:String ,
        title:Number
    })
</script>
<template>
    <div>
    <div>{{ message }}</div>
    <div>{{ title }}</div>
    </div>
</template>
<style>
</style>

2、子传父

Vue3 中子组件向父组件传值可以通过 defineEmits 进行，具体操作如下：

在子组件中定义事件：使用 defineEmits 定义事件。

1
2
3

import {ref,defineEmits} from 'vue'
//1.定义要发送给父组件的方法，可以1或者多个
let emites = defineEmits(['add','sub']);

触发事件并传递参数：在子组件适当的事件处理程序中调用 emit 函数以发射事件。

1
2
3

//2.触发父组件对应的方法，调用defineEmites对应的属性
emites('add','add data!'+data.value)
emites('sub','sub data!'+data.value)

在父组件中监听事件：使用 v-on 或简写 @ 语法在父组件中监听子组件的事件。

1 2	<!-- 声明@事件名应该等于子模块对应事件名！调用方法可以是当前自定义！--> <Son @add="padd" @sub="psub"></Son>

父组件： App.vue

<script setup>
    import Son from './components/Son.vue'
    import {ref} from 'vue'
    let pdata = ref('')
    const padd = (data) => {
        console.log('2222');
        pdata.value =data;
    }
    //自定义接收，子组件传递数据方法！ 参数为数据！
    const psub = (data) => {
        console.log('11111');
        pdata.value = data;
    }
</script>
<template>
    <div>
        <!-- 声明@事件名应该等于子模块对应事件名！调用方法可以是当前自定义！-->
        <Son @add="padd" @sub="psub"></Son>
        <hr>
        {{ pdata }}
    </div>
</template>
<style>
</style>

子组件：Son.vue

<script setup>
    import {ref,defineEmits} from 'vue'
    //1.定义要发送给父组件的方法，可以1或者多个
    let emites = defineEmits(['add','sub']);
    let data = ref(1);
    function sendMsgToParent(){
        //2.触发父组件对应的方法，调用defineEmites对应的属性
        emites('add','add data!'+data.value)
        emites('sub','sub data!'+data.value)
        data.value ++;
    }
</script>
<template>
    <div>
      <button @click="sendMsgToParent">发送消息给父组件</button>
    </div>
</template>

3、兄弟传参

Navigator.vue: 发送数据到App.vue

<script setup type="module">
    import {defineEmits} from 'vue'
    const emits = defineEmits(['sendMenu']);
    //触发事件，向父容器发送数据
    function send(data){
        emits('sendMenu',data);
    }
</script>
<template>
    <!-- 推荐写一个根标签-->
    <div>
       <ul>
          <li @click="send('学员管理')">学员管理</li>
          <li @click="send('图书管理')">图书管理</li>
          <li @click="send('请假管理')">请假管理</li>
          <li @click="send('考试管理')">考试管理</li>
          <li @click="send('讲师管理')">讲师管理</li>
       </ul>
    </div>
</template>
<style>
</style>

App.vue: 发送数据到Content.vue

<script setup>
  import Header  from './components/Header.vue'
  import Navigator  from './components/Navigator.vue'
  import Content  from './components/Content.vue'
  import {ref} from "vue"
  //定义接受navigator传递参数
  var navigator_menu = ref('ceshi');
  const receiver = (data) =>{
    navigator_menu.value = data;
  }
</script>
<template>
  <div>
      <hr>
      {{ navigator_menu }}
      <hr>
     <Header class="header"></Header>
     <Navigator @sendMenu="receiver" class="navigator"></Navigator>
     <!-- 向子组件传递数据-->
     <Content class="content" :message="navigator_menu"></Content>
    </div>
</template>
<style scoped>
    .header{
       height: 80px;
       border: 1px solid red;
    }
    .navigator{
      width: 15%;
      height: 800px;
      display: inline-block;
      border: 1px blue solid;
      float: left;
    }
    .content{
      width: 83%;
      height: 800px;
      display: inline-block;
      border: 1px goldenrod solid;
      float: right;
    }
</style>

Content.vue

<script setup type="module">
    defineProps({
        message:String
    })
</script>
<template>
    <div>
        展示的主要内容！
        <hr>
        {{ message }}
    </div>
</template>
<style>
</style>

第5章 Vue3官方库

5.1 路由机制Router

5.1.1 路由简介

1 什么是路由？

定义：路由就是根据不同的 URL 地址展示不同的内容或页面；
通俗理解：路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航；

2 路由的作用：

单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面；

5.1.2 路由入门案例

1 案例需求分析：

2 创建项目和导入路由依赖：

1
2
3

npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router@4 --save //安装全局的vue-router 4版本， --save表示添加依赖到package.json,默认可省略。--save-dev表示增加开发依赖配置。

3 准备页面和组件：

components/Home.vue

<script setup>
</script>
<template>
    <div>
        <h1>Home页面</h1>
    </div>
</template>
<style scoped>
</style>

components/List.vue

<script setup>
</script>
<template>
    <div>
        <h1>List页面</h1>
    </div>
</template>
<style scoped>
</style>

components/Add.vue

<script setup>
</script>
<template>
    <div>
        <h1>Add页面</h1>
    </div>
</template>
<style scoped>
</style>

components/Update.vue

<script setup>
</script>
<template>
    <div>
        <h1>Update页面</h1>
    </div>
</template>
<style scoped>
</style>

App.vue

<script setup>
</script>
<template>
    <div>
      <h1>App页面</h1>
      <hr/>
        <!-- 路由的连接 -->
        <router-link to="/">home页</router-link> <br>
        <router-link to="/list">list页</router-link> <br>
        <router-link to="/add">add页</router-link> <br>
        <router-link to="/update">update页</router-link> <br>
      <hr/>
      <!-- 路由连接对应视图的展示位置 -->
      <hr> 默认展示位置:<router-view></router-view>
      <hr> Home视图展示:<router-view name="homeView"></router-view>
      <hr> List视图展示:<router-view name="listView"></router-view>
      <hr> Add视图展示:<router-view name="addView"></router-view>
      <hr> Update视图展示:<router-view name="updateView"></router-view>
    </div>
</template>
<style scoped>
</style>

4 准备路由配置：

src/routers/router.js

// 导入路由创建的相关方法
import {createRouter,createWebHashHistory} from 'vue-router'
// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Add from '../components/Add.vue'
import Update from '../components/Update.vue'
// 创建路由对象,声明路由规则
const router = createRouter({
    //createWebHashHistory() 是 Vue.js 基于 hash 模式创建路由的工厂函数。在使用这种模式下，路由信息保存在 URL 的 hash 中，
    //使用 createWebHistory() 方法，可以创建一个路由历史记录对象，用于管理应用程序的路由。在 Vue.js 应用中，
    //通常使用该方法来创建路由的历史记录对象。
    //就是路由中缓存历史记录的对象，vue-router提供
    history: createWebHashHistory(),
    routes:[
        {
            path:'/',
            /* 
                component指定组件在默认的路由视图位置展示
                components:Home
                components指定组件在name为某个值的路由视图位置展示
                components:{
                    default:Home,// 默认路由视图位置
                    homeView:Home// name为homeView的路由视图位置
                }   
            */
            components:{
                default:Home,
                homeView:Home
            }      
        },
        {
            path:'/list',
            components:{
                listView : List
            } 
        },
        {
            path:'/add',
            components:{
                addView:Add
            } 
        },
        {
            path:'/update',
            components:{
                updateView:Update
            }  
        },
    ]

})
// 对外暴露路由对象
export default router;

5 main.js引入Router配置：

修改文件：main.js (入口文件)

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//导入router模块
import router from './routers/router.js'
let app = createApp(App)
//绑定路由对象
app.use(router)
//挂载视图
app.mount("#app")

6 启动测试：

1	npm run dev

内容解释： https://router.vuejs.org/zh/guide/

1. RouterLink 用来渲染一个链接的组件，该链接在被点击时会触发导航。 
    <router-link to="/list">list页</router-link> <br> to属性指的是触发路径跳转到对应组件
2. RouterView RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方！
   可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为default
   <router-view class="view left-sidebar" name="LeftSidebar" />
3. createRouter()函数
   路由器实例是通过调用 createRouter() 函数创建的
   const router = createRouter({
  	 history: createMemoryHistory(), //记录历史记录模式！ 
  	 routes:[
  	 	path: "/对应地址",component: 默认routerView显示组件,
        path: "/对应路径",components:{命名视图名:显示组件,命名视图名:显示组件}
  	 ]  //路由规则
  })
	 路径：动态路径设置，路径传惨
	 /users/:username	              /users/eduardo	
     /users/:username/posts/:postId	  /users/eduardo/posts/123	
     {{ $route.params.username }} 获取参数
4. 注册路由器插件
   createApp(App)
   .use(router)
   .mount('#app')
   注册路由作用：
	  全局注册 RouterView 和 RouterLink 组件。
	  添加全局 $router 和 $route 属性。
	  启用 useRouter() 和 useRoute() 组合式函数。
	  触发路由器解析初始路由。

5.1.3 路由重定向

重定向的作用：将一个路由重定向到另一个路由上。

修改案例：访问/list和/showAll都定向到List.vue.
router.js

{
   path:'/showAll',
   // 重定向
   redirect :'/list'
}

App.vue

<script setup>
</script>
<template>
    <div>
      <h1>App页面</h1>
      <hr/>
        <!-- 路由的连接 -->
        <router-link to="/">home页</router-link> <br>
        <router-link to="/list">list页</router-link> <br>
        <router-link to="/showAll">showAll页</router-link> <br>
        <router-link to="/add">add页</router-link> <br>
        <router-link to="/update">update页</router-link> <br>
      <hr/>
      <!-- 路由连接对应视图的展示位置 -->
      <hr> 默认展示位置:<router-view></router-view>
      <hr> Home视图展示:<router-view name="homeView"></router-view>
      <hr> List视图展示:<router-view name="listView"></router-view>
      <hr> Add视图展示:<router-view name="addView"></router-view>
      <hr> Update视图展示:<router-view name="updateView"></router-view>
    </div>
</template>
<style scoped>
</style>

5.1.4 编程式路由(useRouter)

声明式路由：

<router-link to="/list">list页</router-link> 这种路由，点击后只能切换/list对应组件，是固定的。

编程式路由：

通过useRouter，动态决定向那个组件切换的路由；
在 Vue 3 和 Vue Router 4 中，你可以使用 useRouter 来实现动态路由(编程式路由)；

这里的 useRouter 方法返回的是一个 router 对象，你可以用它来做如导航到新页面、返回上一页面等操作；

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } 

router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

案例需求：通过普通按钮配合事件绑定实现路由页面跳转，不直接使用router-link标签。

App.vue

<script setup type="module">
  import {useRouter} from 'vue-router'
  import {ref} from 'vue'
  //创建动态路由对象
  let router = useRouter()
 
  let  showList= ()=>{
      // 编程式路由
      // 直接push一个路径
      // router.push('/list')
      // push一个带有path属性的对象
      router.push({path:'/list'})
  }
</script>
<template>
    <div>
      <h1>App页面</h1>
      <hr/>
        <!-- 路由的连接 -->
        <router-link to="/">home页</router-link> <br>
        <router-link to="/list">list页</router-link> <br> 
        <!-- 动态输入路径,点击按钮,触发单击事件的函数,在函数中通过编程是路由切换页面 -->
        <button @click="showList()">showList</button> <br>
      <hr/>
      <!-- 路由连接对应视图的展示位置 -->
      <hr> 默认展示位置:<router-view></router-view>
      <hr> Home视图展示:<router-view name="homeView"></router-view>
      <hr> List视图展示:<router-view name="listView"></router-view>     
    </div>
</template>
<style scoped>
</style>

5.1.5 路由传参(useRoute)

路径参数：

在路径中使用一个动态字段来实现，我们称之为 路径参数：
- 例如：查看数据详情 /showDetail/1 ，1就是要查看详情的id，可以动态添值。

键值对参数：

类似与get请求通过url传参，数据是键值对形式的：
- 例如: 查看数据详情/showDetail?hid=1，hid=1就是要传递的键值对参数。

读取参数：

在 Vue 3 和 Vue Router 4 中，你可以使用 useRoute 这个函数从 Vue 的组合式 API 中获取路由对象；
useRoute 方法返回的是当前的 route 对象，你可以用它来获取关于当前路由的信息，如当前的路径、键值对参数等；

案例需求 : 切换到ShowDetail.vue组件时，向该组件通过路由传递参数。

修改App.vue文件

<script setup type="module">
  import {useRouter} from 'vue-router'
  //创建动态路由对象
  let router = useRouter()
  //动态路由路径传参方法
  let showDetail= (id,language)=>{
      // 尝试使用拼接字符串方式传递路径参数
      //router.push(`showDetail/${id}/${languange}`)
      /*路径参数,需要使用params  */
      router.push({name:"showDetail",params:{id:id,language:language}})
  }
  let showDetail2= (id,language)=>{
      /*uri键值对参数,需要使用query */
      router.push({path:"/showDetail2",query:{id:id,language:language}})
  }
</script>
<template>
    <div>
      <h1>App页面</h1>
      <hr/>
      <!-- 路径参数   -->
      <router-link to="/showDetail/1/JAVA">路径传参JAVA</router-link> 
      <button @click="showDetail(1,'JAVA')">编程式路由路径传参显示JAVA</button>
      <hr/>
      <!-- 键值对参数 -->
      <router-link v-bind:to="{path:'/showDetail2',query:{id:1,language:'Java'}}">键值对传参JAVA</router-link> 
      <button @click="showDetail2(1,'JAVA')">编程式路由键值对传参JAVA</button>
      <hr> showDetail视图展示:<router-view name="showDetailView"></router-view>
      <hr> showDetail2视图展示:<router-view name="showDetailView2"></router-view>
    </div>
</template>
<style scoped>
</style>

修改router.js增加路径参数占位符

import {createRouter,createWebHashHistory} from 'vue-router'
import ShowDetail from '../components/ShowDetail.vue'
import ShowDetail2 from '../components/ShowDetail2.vue'
// 创建路由对象,声明路由规则
const router = createRouter({
    history: createWebHashHistory(),
    routes:[    
        {
            /* 此处:id  :language作为路径的占位符 */
            path:'/showDetail/:id/:language',
            /* 动态路由传参时,根据该名字找到该路由 */
            name:'showDetail',
            components:{
                showDetailView:ShowDetail
            }  
        },
        {
            path:'/showDetail2',
            components:{
                showDetailView2:ShowDetail2
            }  
        },
    ]
})
// 对外暴露路由对象
export default router;

ShowDetail.vue 通过useRoute获取路径参数

<script setup type="module">
    import {useRoute} from 'vue-router'
    import { onMounted,ref } from 'vue';
    // 获取当前的route对象
    let route =useRoute()
    let languageId = ref(0)
    let languageName = ref('')
    //  借助更新时生命周期,将数据更新进入响应式对象
    onMounted (()=>{
        // 获取对象中的参数
        languageId.value=route.params.id
        languageName.value=route.params.language
        console.log(languageId.value)
        console.log(languageName.value)
    })    
</script>
<template>
    <div>
        <h1>ShowDetail页面</h1>
        <h3>编号{{route.params.id}}:{{route.params.language}}是世界上最好的语言</h3>
        <h3>编号{{languageId}}:{{languageName}}是世界上最好的语言</h3>
    </div>
</template>
<style scoped>
</style>

ShowDetail2.vue通过useRoute获取键值对参数

<script setup type="module">
    import{useRoute} from 'vue-router'
    import { onMounted,ref } from 'vue';
    // 获取当前的route对象
    let route =useRoute()
    let languageId = ref(0)
    let languageName = ref('')
    //  借助更新时生命周期,将数据更新进入响应式对象
    onMounted (()=>{
        // 获取对象中的参数(通过query获取参数,此时参数是key-value形式的)
        console.log(route.query)
        console.log(languageId.value)
        console.log(languageName.value)
        languageId.value=route.query.id
        languageName.value=route.query.language       
    })    
</script>
<template>
    <div>
        <h1>ShowDetail2页面</h1>
        <h3>编号{{route.query.id}}:{{route.query.language}}是世界上最好的语言</h3>
        <h3>编号{{languageId}}:{{languageName}}是世界上最好的语言</h3>
    </div>
</template>
<style scoped>
</style>

5.1.6 路由守卫

在 Vue 3 中，路由守卫是用于在路由切换期间进行一些特定任务的回调函数。路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。Vue 3 为路由守卫提供了全面的支持，并提供了以下几种类型的路由守卫：

全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等；
全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等；
守卫代码的位置: 在router.js中

//全局前置路由守卫
router.beforeEach( (to,from,next) => {
    //to 是目标地包装对象  .path属性可以获取地址
    //from 是来源地包装对象 .path属性可以获取地址
    //next是方法,不调用默认拦截！ next() 放行,直接到达目标组件
    //next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
    console.log(to.path,from.path,next)
    //需要判断，注意避免无限重定向
    if(to.path == '/index'){
        next()
    }else{
        next('/index')
    }
} )
//全局后置路由守卫
router.afterEach((to, from) => {
    console.log(`Navigate from ${from.path} to ${to.path}`);
});

登录案例，登录以后才可以进入home，否则必须进入login。

定义Login.vue

<script setup>
    import {ref} from 'vue'
    import {useRouter} from 'vue-router'
    let username =ref('')
    let password =ref('')
    let router = useRouter();
    let login = () =>{
        console.log(username.value,password.value)
        if(username.value == 'root' & password.value == '123456'){
            router.push({path:'/home',query:{'username':username.value}})
            //登录成功利用前端存储机制，存储账号！
            localStorage.setItem('username',username.value)
            //sessionStorage.setItem('username',username)
        }else{
            alert('登录失败，账号或者密码错误！');
        }
    }

</script>
<template>   
    <div>
        账号： <input type="text" v-model="username" placeholder="请输入账号！"><br>
        密码： <input type="password" v-model="password" placeholder="请输入密码！"><br>
        <button @click="login()">登录</button>
    </div>
</template>
<style scoped>
</style>

定义Home.vue

<script setup>
 import {ref} from 'vue'
 import {useRoute,useRouter} from 'vue-router'
 let route =useRoute()
 let router = useRouter()
 //  并不是每次进入home页时,都有用户名参数传入
 //let username = route.query.username
 let username =window.localStorage.getItem('username'); 
 let logout= ()=>{
    // 清除localStorge中的username
    //window.sessionStorage.removeItem('username')
    window.localStorage.removeItem('username')
    // 动态路由到登录页
    router.push("/login")
 }
</script>
<template>
    <div>
        <h1>Home页面</h1>
        <h3>欢迎{{username}}登录</h3>
        <button @click="logout">退出登录</button>
    </div>
</template>
<style scoped>
</style>

App.vue

<script setup type="module">
</script>
<template>
    <div>     
      <router-view></router-view>     
    </div>
</template>
<style scoped>
</style>

定义routers.js

import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../components/Home.vue'
import Login from '../components/login.vue'
const router = createRouter({
    history: createWebHashHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/',
            redirect:"/home"
        },
        {
            path:'/login',
            component:Login
        },
    ]
})
// 设置路由的全局前置守卫
router.beforeEach((to,from,next)=>{
    /* 
    to 要去那
    from 从哪里来
    next 放行路由时需要调用的方法,不调用则不放行
    */
    console.log(`从哪里来:${from.path},到哪里去:${to.path}`)
    if(to.path == '/login'){
        //放行路由  注意放行不要形成循环  
        next()
    }else{
        //let username =window.sessionStorage.getItem('username'); 
        let username =window.localStorage.getItem('username'); 
        if(null != username){
            next()
        }else{
            next('/login')
        }
    }
})
// 设置路由的全局后置守卫
router.afterEach((to,from)=>{
    console.log(`从哪里来:${from.path},到哪里去:${to.path}`)
})
// 对外暴露路由对象
export default router;

启动测试

1	npm run dev

5.2 状态管理Pinia

5.2.1 Pinia介绍

如何实现多个组件之间的数据传递?

方式1 组件传参；
方式2 路由传参；
方式3 通过pinia状态管理定义共享数据；

当我们有多个组件共享一个共同的状态(数据源)时，多个视图可能都依赖于同一份状态。来自不同视图的交互也可能需要更改同一份状态。虽然我们的手动状态管理解决方案（props，组件间通信，模块化）在简单的场景中已经足够了，但是在大规模的生产应用中还有很多其他事项需要考虑：

更强的团队协作约定；
与 Vue DevTools 集成，包括时间轴、组件内部审查和时间旅行调试；
模块热更新 (HMR)；
服务端渲染支持；

Pinia 就是一个实现了上述需求的状态管理库，由 Vue 核心团队维护，对 Vue 2 和 Vue 3 都可用。

官网：https://pinia.vuejs.org/zh

5.2.2 Pinia基本用法

1 准备Vite项目：

1
2
3

npm create vite
npm install 
npm install vue-router@4 --save

2 安装Pinia：

1	npm install pinia

3 定义pinia store对象 src/store/store.js （推荐这么命名不是强制）：

import {defineStore } from 'pinia'
//定义数据并且对外暴露
// store就是定义共享状态的包装对象
// 内部包含四个属性： id 唯一标识 state 完整类型推理，推荐使用箭头函数 存放的数据 getters 类似属性计算，获取存储数据
// 操作的方法  actions 存储数据的复杂业务逻辑方法
// 理解： store类似Java中的实体类， id就是类名， state 就是装数据值的属性  getters就是get方法，actions就是对数据操作的其他方法
export const definedPerson = defineStore('personPinia',//必须唯一
    {
        state:()=>{ // state中用于定义数据
            return {
                username:'张三',
                age:0,
                hobbies:['唱歌','跳舞']
            }
        },
        getters:{// 用于定义一些通过数据计算而得到结果的一些方法 一般在此处不做对数据的修改操作
                 // getters中的方法可以当做属性值方式使用
            getHobbiesCount(){
                return this.hobbies.length
            },
            getAge(){
                return this.age
            }
        },
        actions:{ // 用于定义一些对数据修改的方法
            doubleAge(){
                this.age=this.age*2
            }
        }
    }
)

4 在main.js配置Pinia组件到Vue中：

import { createApp } from 'vue'
import App from './App.vue'
import router from './routers/router.js'
// 导pinia
import { createPinia } from 'pinia'
// 创建pinia对象
let pinia= createPinia()
let app =createApp(App)
app.use(router)
// app中使用pinia功能
app.use(pinia) 
app.mount('#app')

5 Operate.vue 中操作Pinia数据：

<script setup type="module">
    import { definedPerson } from '../store/store';
    //import  definedPerson  from '../store/store';//如果采用默认导出，请使用该行导入
    // 读取存储的数据
    let person= definedPerson()

</script>
<template>
    <div>
        <h1>operate视图,用户操作Pinia中的数据</h1>
        请输入姓名:<input type="text" v-model="person.username"> <br>
        请输入年龄:<input type="text" v-model="person.age"> <br>
        请增加爱好:
        <input type="checkbox" value="吃饭"  v-model="person.hobbies"> 吃饭
        <input type="checkbox" value="睡觉"  v-model="person.hobbies"> 睡觉
        <input type="checkbox" value="打豆豆"  v-model="person.hobbies"> 打豆豆 <br>        
        <!-- 事件中调用person的doubleAge()方法 -->
        <button @click="person.doubleAge()">年龄加倍</button> <br>
        <!-- 事件中调用pinia提供的$reset()方法恢复数据的默认值 -->
        <button @click="person.$reset()">恢复默认值</button> <br>
        <!-- 事件中调用$patch方法一次性修改多个属性值 -->
        <button @click="person.$patch({username:'奥特曼',age:100,hobbies:['晒太阳','打怪兽']})">变身奥特曼</button> <br>
		显示pinia中的person数据:{{person}}
    </div>
</template>
<style scoped>
</style>

6 List.vue中展示Pinia数据：

<script setup type="module">
    import { definedPerson } from '../store/store';
    //import  definedPerson  from '../store/store';//如果采用默认导出，请使用该行导入
    // 读取存储的数据
    let person= definedPerson()
</script>
<template>
    <div>
        <h1>List页面,展示Pinia中的数据</h1>
        读取姓名:{{person.username}} <br>
        读取年龄:{{person.age}} <br>
        通过get年龄:{{person.getAge}} <br>
        爱好数量:{{person.getHobbiesCount}} <br>
        所有的爱好:
        <ul>
            <li v-for='(hobby,index) in person.hobbies' :key="index" v-text="hobby"></li>
        </ul>
    </div>
</template>
<style scoped>
</style>

7 定义组件路由router.js：

// 导入路由创建的相关方法
import {createRouter,createWebHashHistory} from 'vue-router'
// 导入vue组件
import List  from '../components/List.vue'
import Operate  from '../components/Operate.vue'
// 创建路由对象,声明路由规则
const router = createRouter({
    history: createWebHashHistory(),
    routes:[
        {
            path:'/operate',
            component:Operate
        },
        
        {
            path:'/list',
            component:List
        },
    ]
})
// 对外暴露路由对象
export default router;

8 App.vue中通过路由切换组件：

<script setup type="module">
</script>
<template>
    <div>
      <hr>
      <router-link to="/operate">显示操作页</router-link> <br>
      <router-link to="/list">显示展示页</router-link> <br>
      <hr>
      <router-view></router-view>
    </div>
</template>
<style scoped>
</style>

9 启动测试：

1	npm run dev

1740920109115

1740920162887

第6章 Axios

6.1 预讲知识-Promise

6.1.1 普通函数和回调函数

普通函数：正常调用的函数，一般函数执行完毕后才会继续执行下一行代码。

<script>
    let fun1 = () =>{
        console.log("fun1 invoked")
    }
    // 调用函数
    fun1()
    // 函数执行完毕,继续执行后续代码
    console.log("other code processon")
</script>

回调函数：一些特殊的函数，表示未来才会执行的一些功能，后续代码不会等待该函数执行完毕就开始执行了。

<script>
    // 设置一个2000毫秒后会执行一次的定时任务
    setTimeout(function (){
        console.log("setTimeout invoked")
    },2000)
    console.log("other code processon")
</script>

6.1.2 Promise 简介

前端中的异步编程技术，类似Java中的多线程+线程结果回调！

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象；
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理；

Promise对象有以下两个特点：

Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变；
一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果；

6.1.3 Promise 基本用法

ES6规定，Promise对象是一个构造函数，用来生成Promise实例。

<script>
   /*  
    1.实例化promise对象,并且执行(类似Java创建线程对象,并且start)
    参数: resolve,reject随意命名,但是一般这么叫!
    参数: resolve,reject分别处理成功和失败的两个函数! 成功resolve(结果)  失败reject(结果)
    参数: 在function中调用这里两个方法,那么promise会处于两个不同的状态
    状态: promise有三个状态
            pending   正在运行
            resolved  内部调用了resolve方法
            rejected  内部调用了reject方法
    参数: 在第二步回调函数中就可以获取对应的结果 
    */
    let promise =new Promise(function(resolve,reject){
        console.log("promise do some code ... ...") 100s
        //resolve("promise success")
        reject("promise fail")
    })
    console.log('other code1111 invoked')
    //2.获取回调函数结果  then在这里会等待promise中的运行结果,但是不会阻塞代码继续运行
    promise.then(
        function(value){console.log(`promise中执行了resolve:${value}`)},
        function(error){console.log(`promise中执行了reject:${error}`)}
    )
    // 3 其他代码执行   
    console.log('other code2222 invoked')
</script>

6.1.4 Promise catch()

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

<script>
    let promise =new Promise(function(resolve,reject){
        console.log("promise do some code ... ...")
        // 故意响应一个异常对象
        throw new Error("error message")
    })
    console.log('other code1111 invoked')
    /* 
        then中的reject()的对应方法可以在产生异常时执行,接收到的就是异常中的提示信息
        then中可以只留一个resolve()的对应方法,reject()方法可以用后续的catch替换
        then中的reject对应的回调函数被后续的catch替换后,catch中接收的数据是一个异常对象
        */
    promise.then(
        function(resolveValue){console.log(`promise中执行了resolve:${resolveValue}`)}
        //,
        //function(rejectValue){console.log(`promise中执行了reject:${rejectValue}`)}
    ).catch(
        function(error){console.log(error)} 
    )
    console.log('other code2222 invoked')
</script>

综合代码：

<script setup >

    console.log("+++++++++++++++++111")

    let promis = new Promise((resolve,reject)=>{
        // 模拟一个异步 API 请求
        setTimeout(() => {
                const userData = {
                    id: 1,
                    name: 'Alice',
                    age: 30,
                };
                resolve(userData);
            }, 2000); // 模拟延迟2秒
    }).then(data=>{
      console.log("resolve:"+data.name)
    },failData=>{
      console.log("reject:"+failData.name)
    });
    console.log("+++++++++++++++++222")

    let promis1 = new Promise((resolve,reject)=>{
        // 模拟一个异步 API 请求
        setTimeout(() => {
                const userData1 = {
                    id: 1,
                    name: 'heheh',
                    age: 30,
                };
                //throw new Error("异常信息")
                reject(userData1);
            }, 2000); // 模拟延迟2秒
    }).then(data1=>{
      console.log("resolve:"+data1.name)
    }).catch(failData1=>{
      //console.log("reject:"+failData1.name)
      console.log("reject:"+failData1)
    });
    console.log("+++++++++++++++++333")
</script>

6.1.5 async和await的使用

async和await是ES6中用于处理异步操作的新特性。通常，异步操作会涉及到Promise对象，而async/await则是在Promise基础上提供了更加直观和易于使用的语法。

async 用于标识函数的：

async标识函数后，async函数的返回值会变成一个Promise对象；
如果函数内部返回的数据是一个非Promise对象，async函数的结果会返回一个成功状态 Promise对象；
如果函数内部返回的是一个Promise对象，则async函数返回的状态与结果由该对象决定；
如果函数内部抛出的是一个异常，则async函数返回的是一个失败的Promise对象；
async其实就是给我们提供了一个快捷声明回调函数的语法，有了它无需编写 new Promise(… …) 这样的代码了；

<script>
    	async function fun1(){
            //return 10
            //throw new Error("something wrong")
            let promise = Promise.reject("something wrong")
            return promise
        }
        let promise =fun1()
        promise.then(
            function(value){
                console.log("success:"+value)
            }
        ).catch(
            function(value){
                console.log("fail:"+value)
            }
        )
</script>

await：

await右侧的表达式一般为一个Promise对象，但是也可以是一个其他值；
如果表达式是Promise对象，await返回的是Promise成功的值；
如果表达式是其他值，则直接返回该值；
await会等右边的Promise对象执行结束，然后再获取结果，所在方法的后续代码也会等待await的执行；
await必须在async函数中，但是async函数中可以没有await；
如果await右边的Promise失败了，就会抛出异常，可以通过 try … catch捕获处理；
await其实就是给我们提供了一个快捷获得Promise对象成功状态的语法，无需编写promise.then(… …)这样的代码了；

<script>
		async function fun1(){
            return 10        
        }
        async function fun2(){
            let res = 0
            try{                
                res = await fun1()
                //res = await Promise.reject("something wrong")
            }catch(e){
                console.log("catch got:"+e)   
            }          
            console.log("await got:"+res)
        }
        fun2()
</script>

综合案例：

// 模拟一个异步函数，获取用户数据
async function fetchUserData(userId) {
    // 模拟网络请求的延迟
    const response = new Promise((resolve) => {
        setTimeout(() => {
            // 模拟返回的用户数据
            resolve({
                id: userId,
                name: "John Doe",
                age: 30
            });
        }, 2000); // 模拟 2 秒的网络延迟
    });
    return response; // 返回响应的数据
}

// 主执行函数
async function displayUser() {
    console.log("Fetching user data...");
    
    // 等待 fetchUserData 的结果
    const user = await fetchUserData(1);
    
    // 打印用户信息
    console.log("User Data:", user);
}

// 调用主执行函数
displayUser();

fetchUserData 函数：
- 使用 async 修饰符定义一个异步函数 fetchUserData。
- 使用 await 关键字等待一个 Promise 的结果。在这个例子中，我们模拟了一个异步操作（网络请求），使用 setTimeout 来延迟响应。
- 一旦 Promise 被解决，我们返回用户数据。
displayUser 函数：
- 这是主执行函数，同样使用 async 关键字。
- 在函数内部，我们调用 fetchUserData，并使用 await 等待它的结果。
- 一旦获取到用户数据，我们将其打印到控制台。
调用 displayUser：
- 最后，我们调用 displayUser 函数，开始整个过程。

6.2 Axios介绍

AJAX ：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）；
AJAX 不是新的编程语言，而是一种使用现有标准的新方法；
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容；
AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行；
XMLHttpRequest 只是实现 Ajax 的一种方式，本次我们使用Vue Axios方式实现；

什么是axios 官网介绍:https://axios-http.com/zh/docs/intro

Axios 是一个基于 Promise网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块，而在客户端 (浏览端) 则使用 XMLHttpRequests。它有如下特性：
- 从浏览器创建 XMLHttpRequest
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御[XSRF]

6.3 Axios 入门案例

1 案例需求：请求后台获取随机土味情话。

请求的url

1	https://api.uomg.com/api/rand.qinghua?format=json

请求的方式

GET/POST

数据返回的格式

1	{"code":1,"content":"我努力不是为了你而是因为你。"}

2 准备项目：

1 2	npm create vite npm install

3 安装Axios：

1	npm install axios

4 设计页面（App.Vue）：

<script setup type="module">
  import axios from 'axios'
  import { onMounted,reactive } from 'vue';
  let jsonData =reactive({code:1,content:'我努力不是为了你而是因为你'})
  let getLoveMessage =()=>{
    axios({
      method:"post", // 请求方式
      url:"https://api.uomg.com/api/rand.qinghua?format=json",  // 请求的url
    // params: {//get请求传递参数
    //   username: 'zhangsan'
    // }
      data:{ // 当请求方式为post时,data下的数据以JSON串放入请求体
        username:"123456"
      }
    }).then( function (response){//响应成功时要执行的函数
      console.log(response)
      Object.assign(jsonData,response.data)
    }).catch(function (error){// 响应失败时要执行的函数
      console.log(error)
    })
  }
  /* 通过onMounted生命周期,自动加载一次 */
  onMounted(()=>{
    getLoveMessage()
  })
</script>
<template>
    <div>
      <h1>今日土味情话:{{jsonData.content}}</h1>
      <button  @click="getLoveMessage">获取今日土味情话</button>
    </div>
</template>
<style scoped>
</style>

5 启动测试：

1	npm run dev

异步响应的数据结构：

响应的数据是经过包装返回的！一个请求的响应包含以下信息。

{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},
  // `config` 是 `axios` 请求的配置信息
  config: {},
  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

then取值

then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
});

6 通过async和await处理异步请求：

<script setup type="module">
  import axios from 'axios'
  import { onMounted,reactive } from 'vue';
  let jsonData =reactive({code:1,content:'我努力不是为了你而是因为你'})
  let getLoveWords = async ()=>{
    return await axios({
      method:"post",
      url:"https://api.uomg.com/api/rand.qinghua?format=json",
      data:{
        username:"123456"
      }
    })
  }
  let getLoveMessage = async ()=>{
   	 let {data}  = await getLoveWords()
     Object.assign(jsonData,data)
  }
  /* 通过onMounted生命周期,自动加载一次 */
  onMounted(()=>{
    getLoveMessage()
  })
</script>
<template>
    <div>
      <h1>今日土味情话:{{jsonData.content}}</h1>
      <button  @click="getLoveMessage">获取今日土味情话</button>
    </div>
</template>
<style scoped>
</style>

axios在发送异步请求时的可选配置：

详情见 https://axios-http.com/zh/docs/req_config

1740927632433

6.4 Axios get和post方法

配置添加语法：

axios.get(url[, config])
axios.get(url,{
   上面指定配置key:配置值,
   上面指定配置key:配置值
})

axios.post(url[, data[, config]])
axios.post(url,{key:value //此位置数据，没有空对象即可{}},{
   上面指定配置key:配置值,
   上面指定配置key:配置值
})

测试axios.get(… … )：

<script setup>
  import axios from 'axios'
  import { onMounted,ref,reactive,toRaw } from 'vue';
  let jsonData =reactive({code:1,content:'我努力不是为了你而是因为你'})

  let getLoveWords= ()=>{
    try{
      return axios.get(
        'https://api.uomg.com/api/rand.qinghua',
        {
          params:{// 向url后添加的键值对参数
            format:'json',
            username:'zhangsan',
            password:'123456'
          },
          headers:{// 设置请求头
            'Accept' : 'application/json, text/plain, text/html,*/*'
          }
        }
      )
    }catch (e){
      return e
    }
  }
  let getLoveMessage = async ()=>{
     let {data}  = await getLoveWords()
     //jsonData = data; //行 才怪呢
     //BeanUtils.copyProperties(源,目标);
     //jsonData.code = data.code;
     //jsonData.content = data.content;
     Object.assign(jsonData,data)// 将第二个属性拷贝到第一个属性的各个属性上
  }
  /* 通过onMounted生命周期,自动加载一次 */
  onMounted(()=>{
    getLoveMessage()
  })
</script>
<template>
    <div>
      <h1>今日土味情话:{{jsonData.content}}</h1>
      <button  @click="getLoveMessage">获取今日土味情话</button>
    </div>
</template>
<style scoped>
</style>

测试 axios.post(… …)：

<script setup type="module">
  import axios from 'axios'
  import { onMounted,ref,reactive,toRaw } from 'vue';
  let jsonData =reactive({code:1,content:'我努力不是为了你而是因为你'})
  let getLoveWords= async ()=>{
    try{
      return axios.post(
        'https://api.uomg.com/api/rand.qinghua',
        {//请求体中的JSON数据
            username:'zhangsan',
            password:'123456'
        },
        {// 其他参数
         	params:{// url上拼接的键值对参数
            	format:'json',
          	},
          	headers:{// 请求头
            	'Accept' : 'application/json, text/plain, text/html,*/*',
            	'X-Requested-With': 'XMLHttpRequest'
          	}
        }
      )
    }catch (e){
      return e
    }
  }
  let getLoveMessage =async ()=>{
     let {data}  = await getLoveWords()
     Object.assign(jsonData,data)
  }
  /* 通过onMounted生命周期,自动加载一次 */
  onMounted(()=>{
    getLoveMessage()
  })
</script>
<template>
    <div>
      <h1>今日土味情话:{{jsonData.content}}</h1>
      <button  @click="getLoveMessage">获取今日土味情话</button>
    </div>
</template>
<style scoped>
</style>

1740928122658

前面的测试可能出现跨域问题。不要测试过多次数，可以过会再测试试。或在vite.config.js中配置代理

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/': {
        target: 'https://api.uomg.com/api/rand.qinghua?format=json',
        changeOrigin: true
      },
    },
  },
})

6.5 Axios 拦截器

如果想在axios发送请求之前，或者是数据响应回来在执行then方法之前做一些额外的工作，可以通过拦截器完成：

// 添加请求拦截器 请求发送之前
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  }, 
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器 数据响应回来
axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, 
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

定义src/axios.js提取拦截器和配置语法

import axios from 'axios'
//  创建instance实例
const instance = axios.create({
    baseURL:'https://api.uomg.com',
    timeout:10000
})
//  添加请求拦截
instance.interceptors.request.use(
    // 设置请求头配置信息
    config=>{
        //处理指定的请求头
        console.log("before request")
        config.headers.Accept = 'application/json, text/plain, text/html,*/*'
        return config
    },
    // 设置请求错误处理函数
    error=>{
        console.log("request error")
        return Promise.reject(error)
    }
)
// 添加响应拦截器
instance.interceptors.response.use(
    // 设置响应正确时的处理函数
    response=>{
        console.log("after success response")
        console.log(response)
        return response
    },
    // 设置响应异常时的处理函数
    error=>{
        console.log("after fail response")
        console.log(error)
        return Promise.reject(error)
    }
)
// 默认导出
export default instance

App.vue

<script setup type="module">
  // 导入自己定义的axios.js文件,而不是导入axios依赖  
  import axios from './axios.js'
  import { onMounted,ref,reactive,toRaw } from 'vue';
  let jsonData =reactive({code:1,content:'我努力不是为了你而是因为你'})
  let getLoveWords= async ()=>{
    try{
      return axios.post(
        'api/rand.qinghua',
        {
            username:'zhangsan',
            password:'123456'
        },//请求体中的JSON数据
        {
          params:{
            format:'json',
          }
        }// 其他键值对参数
      )
      //出现跨域问题临时解决办法。
      //let json = {data: { code: 1, content: '别嫌弃我什么都不会，但是我只会娶你。' }}
      //return Promise.resolve(json)
    }catch (e){
      return e
    }
  }
  let getLoveMessage =async()=>{
    let {data}  = await getLoveWords()
     Object.assign(jsonData,data)
  }
  /* 通过onMounted生命周期,自动加载一次 */
  onMounted(()=>{
    getLoveMessage()
  })
</script>
<template>
    <div>
      <h1>今日土味情话:{{jsonData.content}}</h1>
      <button  @click="getLoveMessage">获取今日土味情话</button>
    </div>
</template>
<style scoped>
</style>

第7章 Element-plus组件库

7.1 Element-plus介绍

Element Plus 是一套基于 Vue 3 的开源 UI 组件库，是由饿了么前端团队开发的升级版本 Element UI。Element Plus 提供了丰富的 UI 组件、易于使用的 API 接口和灵活的主题定制功能，可以帮助开发者快速构建高质量的 Web 应用程序。

Element Plus 支持按需加载，且不依赖于任何第三方 CSS 库，它可以轻松地集成到任何 Vue.js 项目中。Element Plus 的文档十分清晰，提供了各种组件的使用方法和示例代码，方便开发者快速上手。
Element Plus 目前已经推出了大量的常用 UI 组件，如按钮、表单、表格、对话框、选项卡等，此外还提供了一些高级组件，如日期选择器、时间选择器、级联选择器、滑块、颜色选择器等。这些组件具有一致的设计和可靠的代码质量，可以为开发者提供稳定的使用体验。
与 Element UI 相比，Element Plus 采用了现代化的技术架构和更加先进的设计理念，同时具备更好的性能和更好的兼容性。Element Plus 的更新迭代也更加频繁，可以为开发者提供更好的使用体验和更多的功能特性。
Element Plus 可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。如果您确实需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill
官网一个 Vue 3 UI 框架 | Element Plus (element-plus.org)
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。

7.2 Element-plus环境搭建

1 准备vite项目

1
2
3

npm create vite
进入项目
npm install

2 安装element-plus

1	npm install element-plus

3 完整引入element-plus

main.js

import { createApp } from 'vue'
//导入element-plus相关内容
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

7.3 Element-plus常用组件

结合官网演示以下组件

https://element-plus.org/zh-CN

https://element-plus-docs.bklab.cn/zh-CN/

Button组件和Card组件
Table组件和Pagination组件
Form组件和表单数据校验
Message、Message Box及Popconfirm弹框组件

TypeScript

TypeScript 教程 | 菜鸟教程

1 2	const hello : string = "Yangjiayu!" console.log(hello)

第1章 前端工程化开篇