vue2升级vue3踩坑

对比：
在vue2.x中我们挂载全局变量或方法是通过是使用Vue.prototype.$xxxx=xxx的形式来挂载，然后通过this.$xxx来获取挂载到全局的变量或者方法
但是 在vue3.x中显然是不行滴，在setup里面我们都获取不到this，但是 别怕 vue3.x官网给我们提供了新的方法 叫：globalProperties 。添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权

举例： 比如我们挂在一下axios

// 在main.js上 
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
import axios from './api/axios'
app.config.globalProperties.$axios = axios;
app.use(router).use(store).mount('#app');

如何使用呢

// 在页面上引用：
import { getCurrentInstance } from 'vue';
const { proxy } =getCurrentInstance();

使用

proxy.$axios({
 url:'',
 method:'',
}）

组件

在components文件夹下新建index.js

component/index.js
 
// 导入需要注册的两个组件分别为HelloWorld.vue和one.vue
import HelloWorld from "./HelloWorld.vue";
import one from "./one.vue";
 
export default function install(app){
    app.component('HelloWorld',HelloWorld),
    app.component('One-name',one)
}

在main.js中注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import components from '@/components/index' //导入
createApp(App).use(store).use(components).use(router).mount('#app') //注册