vue3使用环境：Vue CLI 4.x以上，Node.js版本 8.9以上。
main.js
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。使用 Vite 可以快速构建 Vue 项目。
Vite 需要 Node.js版本 12.0以上。
在Vue3中，定义计算属性，需要引入computed组合式API。computed()函数的参数是一个回调函数，回调函数的返回值，就是计算属性的返回值。
在Vue3中，定义侦听器，需要引入watch组合式API。
watch函数有三个参数：① 侦听谁，② 回调函数，③ 配置对象(可以省略)。如果监听的是一个对象/对象里的某个属性，第一个参数就是一个函数，由该函数返回指定对象中监视的属性。
注意：watch监视对象，默认开始深度监视，并且无法关闭。所以直接监视整个对象不好。vue3建议我们，监视对象时，指定监视对象的属性。如果监视的对象属性也是一个对象，默认不开启深度监视，需要手动开启。
watchEffect()监视器：只有一个回调函数参数，并且没有参数。特点：① 该回调函数一开始会执行一次；② 不需要明确的去监视谁，回调函数里面用到了谁，谁变了，就会重新执行回调函数。
在Vue2中可以定义过滤器，但是在Vue3中已经取消了过滤器。Vue3推荐我们使用方法 或 计算属性的方式，实现之前过滤器的效果。
在vue3的模板中，不再需要根标签，它内部有一个fragment的组件作为模板的根标签。
vue3中vite的配置
vue3通过安装vuejson让字符串直接显示出来，具体操作步骤如下：
1、进入vue3软件，安装vuejson插件。
2、在vuejson插件的使用页面引入vhtml。
3、使用vhtml，把数值设置为普通字符串显示，即可让字符串直接显示出来。
4、vue3在模版编译方面采用的是编译动态属性和动态节点的方式。
上一节 - 搭建vue3+typescript+vite+yarn项目
在vue2里，我们使用webpack打包工具，一些基本配置我们都是熟悉不能再熟悉，但在vite里，有什么不同呢？
参考链接 - vite 中文文档
vue2里，针对webpack的配置，是基于vue.config.js文件
但在基于vite的vue3里，配置文件是vite.config.js
我构建的是ts版本的vue3项目，那么我的配置文件就是vite.config.ts
而且该文件项目创建的时候已经默认生成了
新创建的项目配置文件，仅仅配置vue的支持，如下：
配置反向代理，利用 server配置项
配置项一目了然，跟vue2的vue.config.js的配置大同小异
这里主要说明下，我proxy里的config
config变量来源于全局变量
这需要在根目录下创建两个命名为：.env.development、.env.production的文件
编写相关的变量：
vue2中使用习惯了开箱即用的路径别名，但在vue3的ts项目里，如果直接使用，是会报错的：
这样配置后，引入组件就能正常被编译了
下一节 - vue3中引入router和vuex
如果觉得《Vue3-前端构建工具(Vue-Cli和Vite) & 计算属性 & 侦听器》对你有帮助，请点赞、收藏，并留下你的观点哦！
