Vue2与Vue3的区别
Vue3由于完全由TS进行重写，在应用中对类型判断的定义和使用有很强的表现。同一对象的多个键返回值必须通过定义对应的接口（interface）来进行类型定义。要不然在ESLint时都会报错。
vue2的双向数据绑定是利用ES5的一个APIObject.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。Vue3中使用了es6的ProxyAPI对数据代理。
Vue3支持碎片(Fragments)
Vue2与Vue3最大的区别:Vue2使用OptionsAPI而Vue3使用的CompositionAPI
生命周期钩子变化:
Vue2~~~~~~~~~~~vue3
beforeCreate-setup()
created-setup()
beforeMount-onBeforeMount
mounted-onMounted
beforeUpdate-onBeforeUpdate
updated-onUpdated
beforeDestroy-onBeforeUnmount
destroyed-onUnmounted
activated-onActivated
deactivated-onDeactivated
介绍vite
Vite：下一代前端开发与构建工具
极速的开发服务器启动
轻量快速的热模块重载（HMR）
丰富的功能
自带优化的构建
通用的插件接口
完全类型化的API
Vite（法语意为“迅速”，发音/vit/）是一种全新的前端构建工具，它极大地改善了前端开发体验。
它主要由两部分组成：
一个开发服务器，它基于原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用Rollup打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。
Vite意在提供开箱即用的配置，同时它的插件API和JavaScriptAPI带来了高度的可扩展性，并有完整的类型支持。
使用vite快速创建脚手架
兼容性注意:Vite需要Node.js版本=12.0.0。
第一步:在需要创建项目文件目录下打开cmd运行以下命令
#npm6.x
npminit
vitejs/appvite_vue3_ts--template#npm7+,需要额外的双横线：
npminit
vitejs/appvite_vue3_ts----template#yarn
yarncreate
vitejs/appvite_vue3_ts--template这里我采用yarn来安装
第二步:选择vue回车=vue-ts回车
第三步:cd到项目文件夹,安装依赖,启动项目
#进入项目文件夹
cdvite_vue3_ts
#安装依赖
yarn
#启动
yarndev
约束代码风格
Eslint支持
#eslint安装
yarnaddeslint--dev
#eslint插件安装
yarnaddeslint-plugin-vue--dev
yarnadd
typescript-eslint/eslint-plugin--devyarnaddeslint-plugin-prettier--dev
#typescriptparser
yarnadd
typescript-eslint/parser--dev注意:如果eslint安装报错:
可以尝试运行以下命令:
yarnconfigsetignore-enginestrue
运行成功后再次执行eslint安装命令
项目下新建.eslintrc.js
配置eslint校验规则:
module.exports={
root:true,
env:{
browser:true,
node:true,
es:true,
},
parser:vue-eslint-parser,
extends:[
eslint:re