初识 Vue 3Vue 3 简介Vue 团队在 2020 年 9 月 18 日发布了 Vue 3.0 版本，代号海贼王,现在市面上一些主流的组件库都已经发布了支持 Vue 3，其他生态也在不断地完善中。Vue 3 的优势：更快的渲染速度：Vue 3 重写了 diff 算法，使用了新的虚拟 DOM 实现，可以更快地渲染页面，减少页面的闪烁和卡顿。更好的 TypeScript 支持：Vue 3 引入了全面的 TypeScript 支持，包括类型检查和代码提示。更好的响应式系统：Vue 3 的响应式系统比 Vue 2 更加灵活和高效，可以更好地处理嵌套数据和响应式数组。更好的组件封装：Vue 3 引入了 Composition API（组合式 API），它可以更好地封装组件的逻辑和状态，并使代码更具可读性和可维护性。更少的包大小：Vue 3 的核心库比 Vue 2 小得多，这意味着更快的下载速度和更少的资源占用。更好的 Tree-Shaking：Vue 3 的模块系统使用 ES 模块，可以更好地支持 Tree-Shaking，当引入一个模块的时候，不引入这个模块的所有代码，只引入我需要的代码

Vue CLI 静态资源管理路径引用规则在 Vue CLI 中，路径引用的场景：如果 URL 是一个绝对路径，它将会被保留不变，可以引用 public 文件夹下的资源。如果 URL 以 . 开头，它会被认为是相对模块请求，根据文档目录结构进行解析。如果 URL 以 \~ 开头，其后的任何内容都会认为是模块请求，可以引用 node\_modules 文件夹下的资源。如果 URL 以 @ 开头，它也会作为一个模块请求被解析，Vue CLI 默认别名 @ 表示 src 文件夹。处理静态资源静态资源可以通过两种方式进行处理：放置在 src/assets 文件夹下的静态资源通过相对路径被引用，这类引用会被 webpack 处理。放置在 public 文件夹下通过绝对路径被引用，这类资源将会直接被拷贝，而不会经过 webpack 的处理。示例：加载图片根组件（App.vue）：<template> <div> <!-- 引用public文件夹下的avatar.png --> <img src="/avata

Vue Router路由概述前端路由是一种在单页应用（SPA）中管理页面导航的技术。其主要作用是根据用户的操作（如点击链接）动态地加载和显示不同的页面内容，而无需重新加载整个页面。Vue 中的路由属于前端路由，它有两种常见的模式，分别是 Hash 模式和 History 模式。Hash 模式的前端路由通过 URL 中从 # 号开始的部分实现不同组件之间的切换，# 号表示 Hash 符，# 号后面的值称为 Hash 值，该值将用于进行路由匹配。History 模式的 URL 地址与后端路由的 URL 地址的风格一致，可以通过 URL 地址中的路径进行路由匹配。Vue Router 初体验Vue Router 是 Vue 官方推出的路由管理器，主要用于管理 URL，实现 URL 和组件的对应，通过 URL 进行组件之间的切换。Vue Router 3.x 文档：https://v3.router.vuejs.org/zh/在 Vue CLI 项目中使用 Vue Router，推荐在 GUI 中为项目安装 @vue/cli-plugin-router 插件。在创建 Vue CLI 项目时，也

Vue CLIVue CLI 概述Vue CLI 是一个官方提供的基于 Vue.js 进行快速开发的脚手架工具，用于快速搭建基于 Vue.js 的前端项目。Vue CLI 文档：https://cli.vuejs.org/Vue CLI 的特点：内置了 webpack 打包工具，可以快速构建项目的基本结构和配置。支持自定义配置，包括 webpack 配置、开发环境和生产环境配置、环境变量等。支持插件机制，可以集成其他框架和库，提高开发效率。支持命令行工具，可以快速生成组件、页面、路由等。使用 Vue CLI，需要全局安装 @vue/cli。示例：全局安装 @vue/cli终端执行：‍# 安装vue-cli npm install @vue/cli -g # 查看vue-cli版本信息 vue -V 示例效果：使用 Vue CLI 创建项目Vue CLI 引入了图形用户界面（GUI）来创建和管理项目。通过 Vue CLI GUI，可以快速创建 Vue CLI 项目，快速地为项目安装一些插件和依赖。示例：使用 GUI 创建项目终端执行：# 运行GUI vue ui示例效果：在浏览器中打开