【vue3】1 创建vue3工程

前言
…
目标

1 vue3的优势有哪些
2 如何创建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中文文档

原创作者: u_16040646 转载于: https://blog.51cto.com/u_16040646/11523271