hzqaq的开发日记 - vue3
type: channel
link: https://gyqaq.fun/index.php/tag/vue3/
items: Vue3教程

Vue3教程
type: item
date: 2026-05-26T11:43:57+08:00
description: 1. Vue3简介2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址：Release v3.0.0 One Piece · vuejs/core截止2023年10月，最新的公开版本为：3.3.41.1. 【性能的提升】打包大小减少41%。初次渲染快55%, 更新渲染快133%。内存减少54%。1.2.【 源码的升级】使用Proxy代替defineProperty实现响应式。重写虚拟DOM的实现和Tree-Shaking。1.3. 【拥抱TypeScript】Vue3可以更好的支持TypeScript。1.4. 【新的特性】Composition API（组合API）：setupref与reactivecomputed与watch......新的内置组件：FragmentTeleportSuspense......其他改变：新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符......2. 创建Vue3工程2.1. 【基于 vue-cli 创建】点击查看官方文档备注：目前vue-cli已处于维护模式，官方推荐基于 Vite 创建项目。## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的@vue/cli npm install -g @vue/cli ## 执行创建命令 vue create vue_test ## 随后选择3.x ## Choose a version of Vue.js that you want to start the project with (Use arrow keys) ## > 3.x ## 2.x ## 启动 cd vue_test npm run serve2.2. 【基于 vite 创建】(推荐)vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：轻量快速的热重载（HMR），能实现极速的服务启动。对 TypeScript、JSX、CSS 等支持开箱即用。真正的按需编译，不再等待整个应用编译完成。webpack构建 与 vite构建对比图如下： 具体操作如下（点击查看官方文档）## 1.创建命令 npm create vue@latest ## 2.具体配置 ## 配置项目名称 √ Project name: vue3_test ## 是否添加TypeScript支持 √ Add TypeScript? Yes ## 是否添加JSX支持 √ Add JSX Support? No ## 是否添加路由环境 √ Add Vue Router for Single Page Application development? No ## 是否添加pinia环境 √ Add Pinia for state management? No ## 是否添加单元测试 √ Add Vitest for Unit Testing? No ## 是否添加端到端测试方案 √ Add an End-to-End Testing Solution? » No ## 是否添加ESLint语法检查 √ Add ESLint for code quality? Yes ## 是否添加Prettiert代码格式化 √ Add Prettier for code formatting? No//vite创建自动映射 router路径 { "extends": "@vue/tsconfig/tsconfig.dom.json", "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "exclude": ["src/**/__tests__/*"], "compilerOptions": { // Extra safety for array and object lookups, but may have false positives. "noUncheckedIndexedAccess": true, // Path mapping for cleaner imports. "paths": { "@/*": ["./src/*"] }, // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking. // Specified here to keep it out of the root director…