一、为什么要学 Vue3?
1.1 Vue3 的优势
1.2 Vue2 选项式 API VS Vue3 组合式 API
1.3 Vue3 组合式 API VS Vue2 选项式 API
需求:点击按钮,让数字+1
二、用 create-vue 搭建 Vue3 项目
2.1 认识 create-vue
create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供极速响应
2.2 使用 create-vue 创建项目
1. 前提环境条件
- 已安装 16.0 或更高版本的 Node.js
- node -v
2. 创建一个 Vue 应用
- npm init vue@latest
- 这一指令将会安装并执行 create-vue
① Shift + 鼠标右键 => 打开 PowerShell 窗口
② 准备工作:确认 node 版本
③ 创建一个 Vue 应用
2.3 熟悉项目目录和关键文件
关键文件:
1. vite.config.js - 项目的配置文件基于vite的配置
2. package.json - 项目包文件核心依赖项变成了Vue3.x 和 vite
3. main.js - 入口文件createApp 函数创建应用实例
4. app.vue - 根组件SFC单文件组件 script - template - style
- 变化一:脚本 script 和 模板 template 顺序调整
- 变化二:模板 template 不再要求唯一根元素
- 变化三:脚本 script 添加 setup 标识支持 组合式 API
5. index.html - 单页入口提供 id 为 app 的挂载点
Vue3 项目中需要暂时禁用一下Vue2 插件 Vetur:
Vue3 项目中 下载插件 volar:
三、组合式 API
3.1 setup 选项
3.1.1 setup 选项的写法和执行时机
setup 执行时期: