一、全局引入文件
1、先定义共用组件 common.vue
<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function commonFun() {
console.log("公共方法")
}
// 暴露出这些属性和方法
export default {
httpUrl,
commonFun
}
</script>
2、在需要使用的地方导入
<script>
// 导入共用组件
import global from './common.vue'
export default {
data () {
return {
username: '',
password: '',
// 赋值使用
globalHttpUrl: global.httpUrl
}
},
3、使用
<template>
{{globalHttpUrl}}
</template>
二、main.js中引入全局变量和方法
1、定义共用组件同上
2、main.js中引入并复制给vue
// 导入共用组件
import global from './common.vue'
Vue.prototype.COMMON = global
3、使用
export default {
data () {
return {
username: '',
password: '',
// 赋值使用, 可以使用this变量来访问
globalHttpUrl: this.COMMON.httpUrl
}
},
三、定义common.js文件,直接在main.js中引入,直接使用
1、common.js 这里注意 Vue.http 组件中使用 this.$http
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
const httpUrl = 'http://39.105.17.99:8080/'
function httpGet (url, params) {
return new Promise((resolve, reject) => {
Vue.http.get(this.httpUrl + url, params).then(
(res) => {
resolve(res.json())
},
(err) => {
reject(err.json())
}
)
})
}
function httpPost (url, params) {
return new Promise((resolve, reject) => {
Vue.http.post(this.httpUrl + url, params).then(
(res) => {
resolve(res.json())
},
(err) => {
reject(err.json())
}
)
})
}
export default {
httpUrl,
httpGet,
httpPost
}
2、main.js
import global from './common/common'
Vue.prototype.GLOBAL = global
3、使用
<template>
{{GLOBAL.httpUrl}}
--------------------------------------------
created () {
this.GLOBAL.httpGet('/home/list', {'name': 'zxc', 'password': '123'}).then(
(res) => {
console.log(res)
}
)
},
总结 实例
common.vue文件,项目中的公共,或者全局文件
vue-resource需要先配置一下 main.js
// 配置使用formDate
Vue.http.options.emulateHTTP = true
Vue.http.options.emulateJSON = true
<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function promiseFun (url, params) {
return new Promise((resolve, reject) => {
this.$http.post(this.globalHttpUrl + url, params).then(
(res) => {
resolve(res.json())
},
(err) => {
reject(err.json())
}
)
})
}
// 暴露出这些属性和方法
export default {
httpUrl,
promiseFun
}
</script>
使用
export default {
data () {
return {
username: '',
password: '',
globalHttpUrl: global.httpUrl,
promiseFun: global.promiseFun
}
},
methods: {
loginInFun () {
localStorage.setItem('userId', '00001')
let params = {
telphone: this.username,
password: this.password
}
this.promiseFun('itArtison/user/login', params).then(
(res) => {
console.log(res)
this.$Message.info(res.message)
// 登录成功过以后,这里从初session
// 先将对象转换为json字符串
localStorage.setItem('userInfo', JSON.stringify(res.data))
if (res.code === '0000') {
this.$router.push({'name': 'Home'})
}
},
(err) => {
console.log(err)
this.$Message.info(err.message)
}
)
}
}