如何在Vue->main.js中引入其他Js文件
一般项目创建完毕之后,Vue都有一个main.js文件,但是有的时候业务需求,需要在这个js文件里面引入其他js文件,两个步骤就可以实现调用了。目标Js文件内创建对象exportObject同时调用具体函数,然后在export default中导出对象修改main.js文件,导入刚刚指向的exportObject。然后通过vue.config对象添加exportObjectTest.js...
·
一般项目创建完毕之后,Vue都有一个main.js文件,但是有的时候业务需求,需要在这个js文件里面引入其他js文件,两个步骤就可以实现调用了。
- 目标Js文件内创建对象exportObject同时调用具体函数,然后在export default中导出对象
- 修改main.js文件,导入刚刚指向的exportObject。然后通过vue.config对象添加exportObject
Test.js目标Js文件
// DES: 定义一个对象执行函数
let InnerObject = innerFunction();
console.log(this);
console.log(InnerObject);
// DES: 导出当前对象
export default {
InnerObject
}
function innerFunction() {
console.log("输出外层this:" + this);
function testInnerFunction() {
console.log("输出嵌套this:" + this);
}
testInnerFunction();
// DES: 返回值按需返回
return "abc";
}
main.js Vue程序入口
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// DES: 导入刚刚export的对象
import InnerObject from "./login/js/Test.js"
Vue.config.productionTip = false;
// DES: 指向config对象的成员变量
Vue.config.InnerObject = InnerObject;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
输出结果符合设想目标
更多推荐
已为社区贡献1条内容
所有评论(0)