vue3知识整合
视频讲解参考： 上尚硅谷Vue3入门到实战：https://www.bilibili.com/video/BV1Za4y1r7KE/?spm_id_from=333.337.search-card.all.click&vd_source=ef0d33a686084368f4ac59c8af6ffb72
作者笔记： https://gitee.com/marina-37/vue3_vite_ts.git
Vue3 教程简介
在Vue3 中
1.编码语言：javaScript， TypeScript（vue3推介TypeScript）
2.代码风格：组合式API, 选项式API (vue3推介组合式API)
3.简写形式: setup语法糖（最重要）
本课程采用的方式：
TypeScript + 组合式API + setup语法糖
主要是vue3的语法
内容丰富
1.核心：ref, reactive,computed, watch, 生命周期 .........
2.常用： hooks, 自定义ref, 路由，pinia, mitt ........
3.面试：组件通信, 响应式相关API ......
1.Vue3简介
1 2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n 2 经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者 3 官方发版地址：Release v3.0.0 One Piece · vuejs/core 4 截止2023年10月，最新的公开版本为：3.3.4
1 1.1. 【性能的提升】 2 打包大小减少41%。 3 4 初次渲染快55%, 更新渲染快133%。 5 6 内存减少54%。
1 1.2.【 源码的升级】 2 使用Proxy 代替 defineProperty 实现响应式 3 4 重写虚拟DOM的实现和 Tree-shaking.
1 1.3. 【拥抱TypeScript】 2 Vue3可以更好的支持TypeScript。
1.4. 【新的特性】
1. Composition API (组合API):
setup
ref 与 reactive
computed 与 watch
2.新的内置组件：
Fragment
Teleport
Suspense
...............
3.其他改变:
新的生命周期钩子
data 选项应始终被声明为一个函数
移除keyCode支持作为 v-on 的修饰符
........
2.创建Vue3工程
1 2.1. 【基于 vue-cli 创建】 2 3 ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上 4 vue --version 5 6 ## 安装或者升级你的@vue/cli 7 npm install -g @vue/cli 8 9 ## 执行创建命令 10 vue create vue_test 11 12 ## 随后选择3.x 13 ## Choose a version of Vue.js that you want to start the project with (Use arrow keys) 14 ## > 3.x 15 ## 2.x 16 17 ## 启动 18 cd vue_test 19 npm run serve
2.2 基于vite 创建（推荐）
vite 是新一代前端构建工具， 官网地址：https://vitejs.cn，
vite的优势如下：
1.轻量快速的热重载（HMR），能实现极速的服务启动。
2.对 TypeScript, JSX, CSS 等支持开箱即用
3.真正的按需编译，不再等待整个应用编译完成
4,.webpack 构建 与 vite 构建对比图示如下
webpack
vite:
-
具体操作如下（点击查看官方文档）
## 1.创建命令：
npm create vue@latest
1 ## 2.具体配置 2 ## 配置项目名称 3 √ Project name: vue3_test 4 ## 是否添加TypeScript支持 5 √ Add TypeScript? Yes 6 ## 是否添加JSX支持 7 √ Add JSX Support? No 8 ## 是否添加路由环境 9 √ Add Vue Router for Single Page Application development? No 10 ## 是否添加pinia环境 11 √ Add Pinia for state management? No 12 ## 是否添加单元测试 13 √ Add Vitest for Unit Testing? No 14 ## 是否添加端到端测试方案 15 √ Add an End-to-End Testing Solution? » No 16 ## 是否添加ESLint语法检查 17 √ Add ESLint for code quality? Yes 18 ## 是否添加Prettiert代码格式化 19 √ Add Prettier for code formatting? No
完整文件目录：index.html是入口
index.html 中 src = src/main.ts 指向项目的具体组件
执行命令 npm run dev
需要 在 package.json 文件中 scripts 下 提前配置
src/main.ts 做了三件事：
1创建应用，
2导入根组件，
3.引用
安装官方推荐的vscode插件
总结：
Vite项目中，index.html是项目的入口文件，在项目最外层。- 加载
index.html后，Vite解析<script type="module" src="xxx">指向的JavaScript。 Vue3**中是通过 **createApp函数创建一个应用实例。