553、Vue 3 学习笔记 -【创建Vue 3.0工程（一）】 2023.06.30

一、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学习笔记