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