前言 ... 目标
1 vue3的优势有哪些 2 如何创建vue3工程
graph LR
A[初始vue3] --> B[vue3带来了什么]
A --> C[如何创建vue3工程]
一 vue3带来了什么
从vue2到vue3一个大版本的升级，必然会有一些性能上的优化 性能提升和源码升级
| 性能提升 | 源码升级 |
|---|---|
| 打包大小减少 | 使用Proxy代替defineProperty实现响应式 |
| 初次渲染快，更新渲染快 | 重写虚拟DOM的实现和Tree-Shaking） |
| 内存减少 |
拥抱TypeScript Vue3可以更好的支持TypeScript 一些新的特性
| Composition API (组合API) | 新的内置组件 |
|---|---|
| setup配置 | Fragment |
| ref与reactive | Teleport |
| watch与watchEffect | Suspense |
| provide与inject |
其他改变 1 新的生命周期钩子 2 data选项应始终被声明为一个函数 3 移除keyCode支持作为v-on的修饰符
二 创建Vue3.0工程
1 使用vue-cli创建
查看版本
vue -V 创建vue3工程 vue-cli 版本要4.5以上的版本
更新Vue CLI到最新版本
npm install -g @vue/cli
创建项目
vue create < project-name>
选择vue3
创建完成
进入项目
cd < project-name>
安装依赖
npm i
运行项目
npm run serve
2 使用vite创建
vite是什么？，在vite官网上给的定义是“新一代前端开发与构建工具”
构建工具这个名词很熟悉吧，开发中常用的构建工具==webpack==（grunt、gulp也是构建工具，但是不常用），但是vite上线之后，webpack也只能逐渐的成为 旧一代的前端构建工具了
为什么这么说呢，vite有很多传统构建工具没有的优势
1 开发环境中，无需打包操作，可快速的冷启动 2 轻量快速的热重载（HMR） 3 真正的按需编译，不在等待整个应用编译完成
传统构建与vite构建工具的打包方式
webpack传统构建方式：根据路由找到下面的所有的依赖模块，都准备好后进行打包 最后启动服务。 比较慢
vite构建工具打包方式：先启动服务，根据接口访问路由，进行打包。速度很快，几乎是几秒就启动好了
创建工程 npm i vite-app < project-name>
进入工程 cd < project-name>
安装依赖 npm i
运行 npm run dev
3 总结
使用vue-cli和vite创建区别
| 分类 | 区别 |
|---|---|
| 工程目录 | 目录有略微的不同 |
| 使用语法 | 一样的都用的Vue3语法 |
| 打包速度 | vite创建的工程更快 |
参考
vue3中文文档
