Vue在单独引入js文件中使用ElementUI的组件

问题场景：

我想在vue中的js文件中使用elementUI中的组件，因为我在main.js中引入了element包和它的css，并挂载到了全局vue实例中。然后我就在js文件中这样使用

this.$notify({

title: "失败",

message: "请先登录老铁~",

type: "error"

});

结果报错了，报错信息如下

TypeError: _this.$notify is not a function

at index.js:44

2019-03-26更新

import axios from 'axios'

// 注意：在js文件中使用element组件 按照下面更优雅哦~~

import {

Message,

MessageBox

} from 'element-ui'

import store from '../store'

import {

getToken

} from '@/utils/auth'

// 创建axios实例

const service = axios.create({

baseURL: process.env.BASE_API, // api 的 base_url

timeout: 5000 // 请求超时时间

})

// request拦截器

service.interceptors.request.use(

config => {

if (store.getters.token) {

config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

}

return config

},

error => {

// Do something with request error

console.log(error) // for debug

Promise.reject(error)

}

)

// response 拦截器

service.interceptors.response.use(

response => {

/**

* code为非20000是抛错 可结合自己业务进行修改

*/

const res = response.data

if (res.code !== 20000) {

Message({

message: res.message,

type: 'error',

duration: 5 * 1000

})

// 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;

if (res.code === 50008 || res.code === 50012 || res.code === 50014) {

MessageBox.confirm(

'你已被登出，可以取消继续留在该页面，或者重新登录',

'确定登出', {

confirmButtonText: '重新登录',

cancelButtonText: '取消',

type: 'warning'

}

).then(() => {

store.dispatch('FedLogOut').then(() => {

location.reload() // 为了重新实例化vue-router对象 避免bug

})

})

}

return Promise.reject('error')

} else {

return response.data

}

},

error => {

console.log('err' + error) // for debug

Message({

message: error.message,

type: 'error',

duration: 5 * 1000

})

return Promise.reject(error)

}

)

export default service

解决：

在该js文件中

//1.引入vue

import Vue from 'vue';

//2.新创建一个vue实例

let v = new Vue();

//3.在新的实例上使用组件

v.$notify.error({

title: '错误',

message: '未登录 或者token过期'

});

附上我的全局拦截器

axios/index.js

//引入vue

import Vue from 'vue';

import axios from 'axios';

//新创建一个vue实例

let v = new Vue();

//全局状态控制引入

import store from '../store/store';

import * as types from '../store/mutation-types';

import router from '../router'

// http request 拦截器

axios.interceptors.request.use(

config => {

if (store.state.userInfo.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token

config.headers.Authorization = `JWT ${store.state.userInfo.token}`;

}

// config.headers.imooc = `5429026`;

return config;

},

err => {

return Promise.reject(err);

});

// http response 拦截器

axios.interceptors.response.use(

undefined,

error => {

let res = error.response;

switch (res.status) {

case 401:

// 返回 401 清除token信息并跳转到登录页面

// store.commit(types.LOGOUT);

//router.replace({

// path: '/app/login',

// query: {redirect: router.currentRoute.fullPath}

//})

console.log('未登录 或者token过期');

this.$notify({

title: "失败",

message: "请先登录老铁~",

type: "error"

});

case 403:

console.log('您没有该操作权限');

// alert('您没有该操作权限');

case 500:

console.log('服务器错误');

// alert('服务器错误');

}

return Promise.reject(error.response.data) // 返回接口返回的错误信息

});