持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

vue3.0正式版是于2020年 9月18日 发布的， 中文文档：v3.cn.vuejs.org/ vue3.0改进了不少东西，如下

1. 数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
2. 虚拟DOM新算法 (更快 更小)
3. 提供了composition api, 可以更好的逻辑复用
4. 模板可以有多个根元素
5. 源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定) 并且结合vite使用，可快速搭建一套非常快速的项目工程。

vue3.0项目搭建

首先确保vue版本已经升至3.0，然后开始新建我们的工程。 使用命令

   yarn create @vitejs/app  项目名

这可以快速创建一个项目工程。

这里我们创建一个v3demo的工程，记住选择创建的是一个vue工程，默认选项里可以创建好几个其他框架工程。

选好vue工程后，出现下一步，选择vue（es版本），还是vue-ts版本，这里我们选择es6写法的版本

到这里我们的工程就建立好了。

运行vue3.0+vite项目

这里我通过webstorm 工具打开 项目打开后，先用npm install 安装依赖。完成后如图

使用npm run dev 运行,如图所示

可以看到速度启动非常快，打开网页如图

一个vue3和vite项目就搭建完毕了。 这编译速度之快，来自于vite这个新的前端构建工具，大大提升了我们的编译速度。 vite的特点有

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译 相对于之前webpack打包编译工具，作出了大的优化，所以vue3.0加上vite结合是未来前端开发的非常好的选项。

总结

这篇主要讲了怎么搭建vue3.0+vite项目，比较简单的几个步骤能帮我们快速搭建，和之前vue2.0项目开发形式差不多，主要注意一些api的变化和使用方式就可以了。