nuxt3集成axios与element-plus（element-ui）

一、nuxt3集成element-plus

1、下载element-plus

    Element Plus 是为了**适配 Vue 3 对 Element UI 进行的重构,nuxt3是基于vue3,所以下载element plus**

npm install element-plus --save

2、创建 plugins/element-plus.ts 文件，加入如下代码

import { defineNuxtPlugin } from '#app'
import  'element-plus/dist/index.full'
import ElementPlus from 'element-plus'
export default defineNuxtPlugin(nuxtApp=>{
    nuxtApp.vueApp.use(ElementPlus)
})

3、在 add.vue 中引入element-plus

<style>
@import 'element-plus/dist/index.css';
</style>

二、nuxt3集成axios

1、下载axios

npm install axios

2、创建server/api/request.ts文件，加入如下代码

    这里是为了封装axios

//我们使用的是vue封装好的异步，所以需要引入axios
import axios from 'axios'
//引入element-plus 是为了请求失败时调用element-plus的弹框组件
import {  ElMessage } from 'element-plus'
// 创建axios实例
const service = axios.create({
    //设置基础访问路径,看自己需要修改
    baseURL: 'http://localhost:9527',
    timeout: 15000 // 请求超时时间
})
// http request 拦截器
service.interceptors.request.use(
    config => {
    //这里可以处理 token ，需要根据需要进行处理，我这里先不处理，
    return config
},
// 抛出错误，阻止程序运行
  err => {
    return Promise.reject(err)
})
// http response 拦截器
service.interceptors.response.use(
    response => {
        //判断请求是否正常
        if (response.data.code !== 200) {
            //出现错误，使用element-plus的弹窗组件,提示错误信息
                ElMessage({
                  showClose: true,
                  message: response.data.message,
                  type: 'error',
                })
            return Promise.reject(response.data)
        } else {
            //成功返回数据
            return response.data
        }
    },
    // 抛出错误
    error => {
        return Promise.reject(error.response)
})
//导出service
export default service

3、封装请求

    创建api文件夹，统一在此文件夹下面创建封装的请求，

比如 ，我创建了dict.js

然后添加下面代码

//这里引入我们封装的axios,看你自己的路径
import request from '@/server/api/request'
const api_name = '/api/member/'
export default {
findByDict(object) {
//请求地址 baseUrl+api_name+find
//baseUrl 我们封装axios的时候定义的
    return request({
        url: `${api_name}/find`,
        method: 'get',
        data: objrct
    })
  },

findByParentId(parentId) {
    return request({
        url: `${api_name}/${parentId}`,
        method: 'get'
    })
  }
}

4****、页面中引入

<script>

    import dictApi from '@/api/dict'

</script>