vue3 globalProperties原型绑定资源管理

2021-08-25  本文已影响0人  ThisWu

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

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文件动不动就可以到上几百行的地步。维护起来极为混乱了。

解决方案:

// 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)

上一篇 下一篇

猜你喜欢

热点阅读