--- url: /blog/is270vx9/index.md --- ![Vue3框架](./Vue.jpg) ## 1. Vue3简介 ### 1.1 Vue3介绍 > Vue (发音为 /vjuː/，类似 **view**) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网为: **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，从此被这门编程语言深深吸引，开启了自己的前端生涯； ### 1.2 Vue3快速体验(非工程化方式) ```html Vue3初体验（非工程化方式）

{{ message }}

``` ## 2. Vue3通过Vite实现工程化 ### 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. 自动化构建和部署：前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等； ### 2.2 Vite创建Vue3工程化项目 #### 1、Vite+Vue3项目的创建、启动、停止 > 1 使用命令行创建工程。 * 在磁盘的合适位置上，创建一个空目录用于存储多个前端项目； * 用vscode打开该目录； * 在vocode中打开命令行运行如下命令； ```shell npm create vite ``` * 第一次使用Vite时会提示下载vite，输入y回车即可，下次使用Vite就不会出现了； - 注意： 输入项目名称vue3-demo，选择Vue+JavaScript选项即可； > 2 安装项目所需依赖： * cd进入刚刚创建的项目目录； * npm install命令安装基础依赖； ```shell cd ./1-vite-project npm install ``` > 3 启动项目： * 查看项目下的package.json ```json { "name": "1-vite-project", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.5.34" }, "devDependencies": { "@vitejs/plugin-vue": "^6.0.6", "vite": "^8.0.12" } } ``` ```shell npm run dev ``` > 5 停止项目： * 命令行上 ctrl+c #### 2、Vite+Vue3项目的目录结构 > 1.下面是 Vite 项目结构和入口的详细说明： ![Vue3框架](./第3章-Vue3框架/img-1.jpg) ::: tip * 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的组件? * 一个页面作为整体，是由多个部分组成的，每个部分在这里就可以理解为一个组件； * 每个.vue文件就可以理解为一个组件，多个.vue文件可以构成一个整体页面； * 组件化给我们带来的另一个好处就是组件的复用和维护非常的方便； > 什么是.vue文件? * 传统的页面有html文件css文件和js文件三个文件组成(多文件组件) ； * vue将这文件合并成一个vue文件(Single-File Component，简称 SFC，单文件组件)； * vue文件对js/css/html统一封装，这是VUE中的概念，该文件由三个部分组成 ` ``` > 2 Vue3响应式数据入门： ```html ``` > 3 Vue3 setup函数和语法糖： * 位置：src/App.vue。 ```vue ``` ![Vue3框架](./第3章-Vue3框架/img-2.jpg) #### 5、Vite+Vue3关于样式的导入方式 1. 全局引入main.js； ```javascript import './style/reset.css' //书写引入的资源的相对路径即可！ ``` 2. vue文件script代码引入； ```javascript import './style/reset.css' ``` 3. Vue文件style代码引入；\[不推荐] ```javascript @import './style/reset.css'; ``` #### 6、vscode中创建vue3SFC模版 1. vscode点击设置 ![image-20241021154904344](./assets/image-20241021154904344.png) 2. 搜索vue.json配置参数 ![image-20241021155020009](./assets/image-20241021155020009.png) 3. 添加vue3 SFC模板代码 ```json { "Print to console": { "prefix": "sfc", //键入该值，按tab快捷产生 "body": [ "", "", "", "", "", ], "description": "vue3的sfc模板" } } ``` ![Vue3框架](./第3章-Vue3框架/img-3.jpg) 4. 使用vue3模板 ``` vue -> sfc + tab即可 ``` ## 3. Vue3视图渲染技术 ### 3.1 模版语法 > Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。 #### 1、插值表达式和文本渲染 > 插值表达式：最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 ，即双大括号`{{}}`： * 插值表达式是将数据渲染到元素的指定位置的手段之一； * 插值表达式不绝对依赖标签，其位置相对自由； * 插值表达式中支持javascript的运算表达式； * 插值表达式中也支持函数的调用； ```html ``` > 为了渲染双标中的文本，我们也可以选择使用`v-text`和`v-html`命令： * v-\*\*\* 这种写法的方式使用的是vue的命令； * v-\*\*\*的命令必须依赖元素，并且要写在元素的开始标签中； * v-\*\*\*指令支持ES6中的模板字符串； * 插值表达式中支持javascript的运算表达式； * 插值表达式中也支持函数的调用； * v-text可以将数据渲染成双标签中间的文本，但是不识别html元素结构的文本； * v-html可以将数据渲染成双标签中间的文本，识别html元素结构的文本； ```html ``` #### 2、Attribute属性渲染 > 想要渲染一个元素的 attribute，应该使用 `v-bind`指令。 * 由于插值表达式不能直接放在标签的属性中，要渲染元素的属性就应该使用v-bind； * v-bind可以用于渲染任何元素的属性，语法为 `v-bind:属性名='数据名'`， 可以简写为 `:属性名='数据名'`； ```html ``` #### 3、事件的绑定 > 我们可以使用 `v-on` 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。 * 用法：`v-on:click="handler"` 或简写为 `@click="handler"`； * vue中的事件名=原生事件名去掉`on` 前缀 如:`onClick --> click`； * handler的值可以是方法事件处理器，也可以是内联事件处理器； * 绑定事件时，可以通过一些绑定的修饰符，常见的事件修饰符如下： * `.once：只触发一次事件。[重点]`； * `.prevent：阻止默认事件。[重点]，例如：a标签添加阻止默认事件，就不触发href属性对应的地址了`； ```html ``` ### 3.2 响应式基础 > 此处的响应式是指 ： 数据模型（自定义的变量、对象）发生变化时，自动更新DOM树内容，页面上显示的内容会进行同步变化。vue3的数据模型不是自动响应式的，需要我们做一些特殊的处理。 #### 1、如何实现响应式 > 使用`ref`或`reactive`函数就可以将基本类型的数据（如字符串，数字等）和引用类型的数据（如对象）转换为一个响应式对象。 ```html ``` #### 2、ref与reactive的区别 1. ref函数可以包装基本类型（字符串、数字）和引入类型（数组、对象）；reactive只能包装引用类型 2. 使用ref包装的数据在JS中修改或获取的时候需要加.value，在DOM中不用添加.value；用reactive包装的数据在JS和DOM中都不需要添加.value 3. 使用ref包装的对象，对象和对象的属性都是响应式的；使用reactive包装的对象，对象不是响应式的，对象的属性是响应式的 ### 3.3条件和列表渲染 #### 1、条件渲染 > `v-if` 条件渲染： * `v-if='表达式' `只会在指令的表达式返回真值时才被渲染 * 也可以使用 `v-else` 为 `v-if` 添加一个“else 区块”。 * 一个 `v-else` 元素必须跟在一个 `v-if` 元素后面，否则它将不会被识别。 ```html ``` > `v-show`条件渲染扩展： * 另一个可以用来按条件显示一个元素的指令是 `v-show`。其用法基本一样； * 不同之处在于 `v-show` 会在 DOM 渲染中保留该元素；`v-show` 仅切换了该元素上名为 `display` 的 CSS 属性； * `v-show` 不支持在 `