vue2 引入Element UI和Axios_vue2.0 安装 element +axios

vue2 引入Element UI和Axios

前提正确安装了vue2

引入Element UI

1. 在项目中控制台输入npm install element-ui --save命令进行安装

npm install element-ui --save

2. 项目中引进Element UI依赖

在项目的src目录中找到main.js文件，然后添加代码

import Element from ‘element-ui’

import ‘element-ui/lib/theme-chalk/index.css’

Vue.use(Element)

例如：

然后我们就可以在vue中使用element ui组件了

引入axios

1. 项目安装axios

npm install axios --save

2. 引入依赖并全局注册

import axios from ‘axios’
Vue.prototype.$axios = axios

axios扩展(封装请求文件)

1. 创建axios请求配置文件 request.js

import axios from "axios";
import global from "@/config/global"
import  { Message } from 'element-ui'
// 配置API接口地址
const root = global.BASE_WEB_URL;

function apiAxios (method, url, params, successFunction, failureFunction) {

    // post 和 get 请求中，header的Content-Type是不一样的
    const header= method === 'POST' ? {'Content-Type':'multipart/form-data'}:{'Content-Type':' application/json'};

    // 后端sa-token需要的登录认证信息
    const satoken = localStorage.getItem('identity_str');

    satoken? header['satoken'] = satoken : null

    // axios请求
    axios({
        method: method,
        url: url,
        data: method === 'POST' || method === 'PUT' ? params : null,
        params: method === 'GET' || method === 'DELETE' ? params : null,
        baseURL: root,
        withCredentials: false,
        headers: header
    })
        .then(function (res) {
            if (res.data.code === 200) {
                if (successFunction) {
                    successFunction(res.data)
                }
            } else {
                if (failureFunction) {
                    failureFunction(res.data)
                }else{
                    Message({
                        message: res.data.message,
                        type: 'error',
                    })
                }
            }
        })
        .catch(function (err) {
            Message({
                message: "系统异常，联系管理员处理,异常信息："+err,
                type: 'error',
            })
            // if (failure){
            //     failure({code:500,message:"系统异常，联系管理员处理"})
            // }else {
            //     let res = err.response
            //     if (err) {
            //         window.alert('api error, HTTP CODE: ' + res)
            //         console.log(res)
            //     }
            // }
        })

}

// 返回在vue模板中的调用接口
export default {
    get: function (url, params, success, failure) {
        return apiAxios('GET', url, params, success, failure)
    },
    post: function (url, params, success, failure) {
        return apiAxios('POST', url, params, success, failure)
    },
    put: function (url, params, success, failure) {
        return apiAxios('PUT', url, params, success, failure)
    },
    delete: function (url, params, success, failure) {
        return apiAxios('DELETE', url, params, success, failure)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

2. 封装vue页面的api文件

这个文件应该是每个vue页面（component）对应的文件，即是每个component对应创建一个api文件，便于后续与后端联调时减少对component文件的操作。例如Login.vue对应的api文件LoginApi.js

import request from '@/utils/request'

export default  {
    // 登录接口
    login(param,successFunction,errorFunction){
        return request.post('/login',param,successFunction,errorFunction);
    }

}
1
2
3
4
5
6
7
8
9