「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」。

在之前vue2.0的已经学完了，接下来我将把我学vue3.0的心得概念讲给大家。

先附上我们vue3.0的简介吧

## 1.Vue3简介

- 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
- 耗时2年多、[2600+次提交](https://github.com/vuejs/vue-next/graphs/commit-activity)、[30+个RFC](https://github.com/vuejs/rfcs/tree/master/active-rfcs)、[600+次PR](https://github.com/vuejs/vue-next/pulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview+)、[99位贡献者](https://github.com/vuejs/vue-next/graphs/contributors) 
- github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

一、创建Vue3.0工程

1.使用 vue-cli 创建

官方文档：cli.vuejs.org/zh/guide/cr…

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve

但是我们的vue的工作台是vue2的所以我们使用vue3项目的时候将会变成这样

接下来我和大家讲讲关于vue3.0中vite的内容那么vite是什么呢？在官网中我们看到怎么一句话新一代的前端构建工具，看到构建工具我们会想到什么呢？现在的一代的是webpack，那为什么说他是新一代的呢？他就是想替代webpack，但是他凭什么有这本事呢，就凭他是vue开发团队研发的。下面让我们来了解一下吧：

vite他的优势是什么：

优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
传统构建与 vite构建对比图

vite 创建

用vite插件的vue3版本的项目流程

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

vue3.0使用创建

一、创建Vue3.0工程

1.使用 vue-cli 创建

vite 创建