目录
- 一、Vue 3 介绍
- 1. Vue 3 官方文档
- 2. Vue 3带来了什么
- 1.1 性能的提升
- 1.2 源码的升级
- 1.3 拥抱TypeScript
- 1.4 新的特性
- 二、创建Vue3.0工程
- 1. 使用 vue-cli创建
- 2. 使用vite创建
- 3. 分析工程结构
- 三、参考链接
一、Vue 3 介绍
1. Vue 3 官方文档
Vue 3 官方的文档地址
2. Vue 3带来了什么
1.1 性能的提升
打包大小减少41%
初次渲染快55%，更新渲染快133%
内存减少54%……
1.2 源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking……
1.3 拥抱TypeScript
Vue 3 可以更好的支持TypeScript
1.4 新的特性
…
二、创建Vue3.0工程
1. 使用 vue-cli创建
官方文档：创建一个项目
##查看 @vue/cli版本，确保 @vue/cli版本在4.5.0以上
vue --version 或 vue -V
##安装或升级@vue/cli
npm install -g @vue/cli
##创建
vue create vue_project
##启动
cd vue_project
npm run serve
这个运行项目的速度明显比使用vite创建要慢，因为这种方式会先进行打包。
2. 使用vite创建
官方文档：快速上手
vite官网：vitejs.cn
vite是新一代的前端构建工具。
优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载。
- 真正的按需编译，不再等待整个应用编译完成。
搭建第一个vite项目:
提醒：Vite 需要 Node.js 版本 >= 12.0.0
npm init vite@latest vue3_test 或者 npm init vite-app vue3_test
切换到文件夹下 npm i 安装依赖：
运行项目：
3. 分析工程结构
三、参考链接
[01] Vue3学习笔记
