Vue

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) // 返回接口返回的错误信息
  });