已知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)
网友评论