vue3 globalProperties原型绑定资源管理

已知vue2想给原型绑定资源管理的方法很简单

• 先创建prototype.js引入vue
• 然后直接绑定vue原型
• main.js 直接引用当前js文件就好

import Vue from 'vue'
/**
 * 判断是否空
 * 空 返回false 非空 true
 * */
Vue.prototype.isNull = function(flag){
    if(flag != null &&flag!="" && flag != "null"){
        return true
    }else{
        return false
    }
};

// main.js文件直接引入
import "./prototype"

vue3的绑定就必须先创建app，然后绑定在app上。

如例:

import { createApp } from 'vue'                        // 导入
const app = createApp(App)                             //  创建
app.config.globalProperties.$http = axios;    //  绑定

这样的写法看着很清楚，但是有经验的人都知道main文件一般都管理这诸多文件，如果一个管理不好，main文件动不动就可以到上几百行的地步。维护起来极为混乱了。

解决方案：

• 明确引入方式，绑定对象 。（文件创建，和得到createApp后的app对象）
• 然后直接绑定vue原型。 （在此之前需要引入vue内置方法）
• main.js 直接引用当前js文件就好
  如例:

// main.js  默认导出创建后并挂在的app对象
export default app

// 原型上
import app from "../main.js"
import { createApp } from 'vue'                        // 导入
import {nextTick} from "@vue/runtime-core";
// 这里是重点。 - 必须加nextTick,不然会有加载顺序问题，导致绑定失败
nextTick(() => {
    app.config.globalProperties.$http = axios;    //  绑定
})

如想看更详细代码或想学习vite和vue3.2+请移步： tw-vue-vite: 一个基于vue3.2（全家桶）+ vite + elementplus的系统集成架构 (gitee.com)