VUE3+TS+VITE的一些经验总结

主要是一些和vue2版本差异较大的方面，持续更新中。

1. 配置资源路径，在env环境变量中设置VITE_PUBLIC_PATH = './'即可。
2. 获取环境变量中定义的全局属性，获取环境用process.env.NODE_ENV，获取其他全局属性用import.meta.env.xxx。
3. 获取页面跳转携带的查询参数，需要在页面组件中引用vue-router中的useRoute，通过useRoute的query属性获取。

   import { useRoute } from 'vue-router'
   formData = useRoute().query

4. main.ts中可以设置关闭浏览器控制台警告和错误。

   app.config.warnHandler = () => null;
   app.config.errorHandler = () => null;

5. 全局变量、方法挂载

   // in main.ts
   app.config.globalProperties.xxx = 'yy'
   
   // 使用中
   // ts
   import { getCurrentInstance } from "vue";
   const {
     appContext: {
       config: { globalProperties },
     },
   } = getCurrentInstance();
   
   // vue-html
   {{globalProperties.xxx}}
   
   
   // 或者
   import { getCurrentInstance } from "vue";
   let instance: ComponentInternalInstance | null = getCurrentInstance();
   instance.proxy.xxx;

6. 使用css变量，括号里一定是带引号的，js运算在引号内。

   color: v-bind('style.color');