# 第1章前端工程化开篇 ## 1.1 什么是前端工程化 > **`前端工程化`**是使用**`软件工程的方法`**来**`单独`**解决**`前端`**的开发流程中**`模块化、组件化、规范化、自动化`**的问题，以提高效率和降低成本。 ## 1.2 前端工程化实现技术栈 > 前端工程化实现的技术栈有很多，我们采用 > > ES6 + Nodejs + npm + Vite + VUE3 + Router + Pinia + Axios + Element-plus 组合来实现。 JavaScript是1995年，网景公司的工程师小布（布莱登·艾奇）设计的，目的是为解决网页添加动态交互功能。花了10天写了一门计算机语言。后来由ECMA国际组织进行标准化（标准名称为ECMAScript），并由各大浏览器厂商（如Mozilla、微软、谷歌等）持续开发和优化。 js分为三大部分：DOM（动态增删改查节点） BOM（动态操作浏览器） ECMAScripts(包含了js的基本语法) + 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的改进在以下几个方面： 1. 更加简洁：ES6引入了一些新的语法，如箭头函数、模板字符串等，使代码更加简洁易懂 2. 更强大的功能：ES6引入了一些新的API、解构语法和迭代器等功能，从而使得JavaScript更加强大 3. 更好的适用性：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中推荐优先使用 ```html Document ``` + const和var的差异： 1、新增const和let类似，只是const定义的变量不能修改，声明一个只读变量 2、并不是变量的值不能改动，而是变量指向的那个内存地址所保存的数据不能改动； > 其实 const 保存的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改动。此时，你可能已经想到，简单类型和复合类型保存值的方式是不同的。是的，对于简单类型（数值 number、字符串 string 、布尔值 boolean）, 值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量。而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以 const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了 ```html ``` > 模板字符串（template string）是增强版的字符串，用飘号，也叫反引号（`）标识。 1、字符串中可以出现换行符； 2、可以使用 ${xxx} 形式输出变量和拼接变量； ``` html ``` ## 2.3 es6的解构表达式 > ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用花括号 `{}` 表示对象，方括号 `[]` 表示数组。通过解构赋值，函数更方便进行参数接受等！ > **数组解构赋值**： ```javascript let [a, b, c, d = 4] = [1, 2, 3]; console.log(a,b,c,d); //该语句将数组 [1, 2, 3] 中的第一个值赋值给 a 变量，第二个值赋值给 b 变量，第三个值赋值给 c 变量。可以使用默认值为变量提供备选值，在数组中缺失对应位置的值时使用该默认值。 ``` > **对象解构赋值**： ```javascript let {a, b} = {a: 1, b: 2}; //新增变量名必须和属性名相同，本质是初始化变量的值为对象中同名属性的值 //等价于 let a = 对象.a let b = 对象.b console.log(a,b); //该语句将对象 {a: 1, b: 2} 中的 a 属性值赋值给 a 变量，b 属性值赋值给 b 变量。可以为标识符分配不同的变量名称，使用 : 操作符指定新的变量名。例如： let {a: x, b: y} = {a: 1, b: 2}; console.log(x,y); ``` > **函数参数解构赋值**： + 解构赋值也可以用于函数参数，例如： ```javascript function add([x, y]) { return x + y; } add([1, 2]); ``` + 该函数接受一个数组作为参数，将其中的第一个值赋给 x，第二个值赋给 y，然后返回它们的和； + ES6 解构赋值让变量的初始化更加简单和便捷。通过解构赋值，我们可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性； ## 2.4 es6的箭头函数 > ES6 允许使用“箭头” 函数。语法类似Java中的Lambda表达式。 ### 2.4.1 声明 ```html ``` ### 2.4.2 参数默认值 ```html ``` ### 2.4.3 三个点扩展运算符 > 用法一：作为可变参数 ``` html ``` > 用法二：复制数组和对象的属性 ```html ``` ## 2.5 链判断 > 如果读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。 > > 比如，读取emp.dept.name这个属性，安全的写法是写成下面这样: ```javascript let emp = null // 错误的写法 //const empName = emp.dept.name|| 'default' // 正确的写法 const empName = (emp && emp.dept && emp.dept.name || 'default') console.log(empName) ``` > 这样的层层判断非常麻烦，因此 [ES2020](https://github.com/tc39/proposal-optional-chaining) 引入了“链判断运算符”（optional chaining operator）**?.**，简化上面的写法: ```javascript //let emp = null let emp = { name:"张三", dept:{ name:"教学部" } } const empName = emp?.dept?.name || 'default' ``` ## 2.6 ES6的模块化处理 ### 2.6.1模块化介绍 > 模块化是一种组织和管理前端代码的方式，将代码拆分成小的模块单元，使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。前端模块化的主要优势如下： 1. 提高代码可维护性：通过将代码拆分为小的模块单元，使得代码结构更为清晰，可读性更高，便于开发者阅读和维护； 2. 提高代码可复用性：通过将重复使用的代码变成可复用的模块，减少代码重复率，降低开发成本； 3. 提高代码可扩展性：通过模块化来实现代码的松耦合，便于更改和替换模块，从而方便地扩展功能； > 目前，前端模块化有多种规范和实现，包括 CommonJS、AMD 和 ES6 模块化。ES6 模块化是 JavaScript 语言的模块标准，使用 import 和 export 关键字来实现模块的导入和导出。现在，大部分浏览器都已经原生支持 ES6 模块化，因此它成为了最为广泛使用的前端模块化标准.。 + ES6模块化的几种暴露和导入方式： 1. 分别导出； 2. 统一导出； 3. 默认导出； + `ES6中无论以何种方式导出,导出的都是一个对象,导出的内容都可以理解为是向这个对象中添加属性或者方法`！！！ ### 2.6.2 分别导出 1684461046181

+ module.js 向外分别暴露成员： ``` javascript //1.分别暴露 // 模块想对外导出,添加export关键字即可! // 导出一个变量 export const PI = 3.14 // 导出一个函数 export function sum(a, b) { return a + b; } ``` + app.js 导入module.js中的成员： ``` javascript /* *代表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 ： ``` html

``` ## 4.2 Vue3通过Vite实现工程化 ### 4.2.1 Vite的介绍

> 在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁，我们见证了诸如 [webpack](https://webpack.js.org/ "webpack")、[Rollup](https://rollupjs.org/ "Rollup") 和 [Parcel](https://parceljs.org/ "Parcel") 等工具的变迁，它们极大地改善了前端开发者的开发体验。 + 当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长； + 包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感； > Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。https://cn.vitejs.dev/guide/why.html。前端工程化的作用包括但不限于以下几个方面： 1. 快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操作，从而节省时间和精力； 2. 统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让不同开发者在同一个项目上编写出风格一致的代码，提高协作效率和质量； 3. 代码模板和组件库：前端脚手架可以包含一些常用的代码模板和组件库，使开发者在实现常见功能时不再重复造轮子，避免因为轮子质量不高带来的麻烦，能够更加专注于项目的业务逻辑； 4. 自动化构建和部署：前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等； ### 4.2.2 Vite创建Vue3工程化项目 #### 1、Vite+Vue3项目的创建、启动、停止 > 1 使用命令行创建工程。 + 在磁盘的合适位置上，创建一个空目录用于存储多个前端项目； + 用vscode打开该目录； + 在vocode中打开命令行运行如下命令； ```shell npm create vite ``` + 第一次使用Vite时会提示下载vite，输入y回车即可，下次使用Vite就不会出现了； 1687769339457

+ 注意：输入项目名称vue3-demo，选择Vue+JavaScript选项即可； > 2 安装项目所需依赖： + cd进入刚刚创建的项目目录； + npm install命令安装基础依赖； ``` shell cd ./vue3-demo npm install ``` > 3 启动项目： + 查看项目下的package.json ```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" } } ``` ``` shell npm run dev ```

> 5 停止项目： + 命令行上 ctrl+c #### 2、Vite+Vue3项目的目录结构 > 1.下面是 Vite 项目结构和入口的详细说明： 1684489112904

- 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)。 ```json { "scripts": { "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve` "build": "vite build", // 为生产环境构建产物 "preview": "vite preview" // 本地预览生产构建产物 } } ``` + 运行设置端口号：(vite.config.js)。 ```javascript //修改vite项目配置文件 vite.config.js export default defineConfig({ plugins: [vue()], server:{ port:3000 } }) ``` #### 3、Vite+Vue3项目组件(SFC入门) > 什么是VUE的组件? > > https://cn.vuejs.org/api/sfc-spec Vue 的单文件组件 (即 `*.vue` 文件，英文 Single-File Component，简称 **SFC**) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例： ```javascript ``` Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。`

{{ message }}

{{ message }}

你成年了吗：{{ age>=18?"已成年":"未成年"}}

你的居住地：{{ getAddress() }}

班级总人数：{{ count }}

全校总人数：{{ totalCount }}

使用ref函数包装的对象：{{ obj }}

使用reactive函数包装的对象：{{ obj2 }}

没有任何用户

用户列表