javascript - Vue的变量以及文件引用结构问题 （涉及vue-resource的引用和使用）

问题描述

问 题

1.初学者，刚开始学习Vue和js，求指点：
2.用webpack构建的Vue项目，入口文件是main.js
在main.js文件中

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import App from './App.vue'
Vue.use(VueRouter)
Vue.use(VueResource)

比如在某个.vue组件中要用vue-resource，可以用this.$http.get(url).then....
那如果在某个js文件中，比如用来获取数据的api的js文件，里面要怎么去用vue-resource，需要在js文件里面重新import VueResource from 'vue-resource'吗？
另外，在main.js中定义的Vue这些全局变量，在其他js文件中用到的话，需要引用或者导入吗？

解决方案

首先，你需要在main.js把 Vue实例 设为全局window.vm = new Vue({})，这样你在其他js文件上就不用引入或者导入了，当然你要不嫌麻烦也可以在main.js上 var vm = new Vue({}), export default {vm ... }，然后在用到的JS上import了
另外，vue-resource 在 api.js 文件里，可以用 vm.http.get(url).then();只要在main.js上用了Vue.use(VueResource)，就不需要在api.js上重新导入了
具体看下官方文档：链接描述

这篇关于javascript - Vue的变量以及文件引用结构问题 （涉及vue-resource的引用和使用）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！