在vue项目中按需封装element ui 以及 api接口

---

前言

封装起来不仅便于我们进行统一的管理，也便于修改，同时按需导入，减少导入没有必要的，减小所占的内存。

---

一、封装element ui

我们往往并不是需要用到所有的 element ui 的所有组件，如果我们按照我们用到的进行导入就能减小所占的内存！yes！！就能为性能的优化做出小小的进步啦！！！

第一步：创建

其实很简单的！我们在目录下 src 下创建一个叫 util 的文件夹用来存放我们封装等功能的一些文件 ，接着我们再创建一个 element.js 的文件来存放，如图下图：

第二步：设置

在element.js文件里，我们写上这样的代码：

// only import the module we need,by this way to reduce the size in our project
import { Button } from 'element-ui'
const element = {
    install: function (Vue) {
        Vue.use(Button)
    }
}
export default element

我们只要把我们要用到的组件导入，然后使用就可以了。以后我们所有对组件的引入都在该文件进行，是不是很棒，有清晰明了，还很好控住管理！也是！！

第三步：导入

最后一步我们需要在main.js中导入我们创建的文件，进行使用就大功告成啦！！

//import element
import elementUI from './util/element.js'
//import element styles
import 'element-ui/lib/theme-chalk/index.css'
//register element in vue
Vue.use(elementUI)

如果我们不进行封装继需要把代码都写到main.js里面会使得 main.js 看起来有点乱，也不符合我们对没得追求。嘻嘻嘻。

---

二、封装api

封装了接口管理，之后就能非常便捷了，我们统一管理，就算后台改了接口的地址我们也只要更改一处就好了，

第一步：创建

同上面一样，我们在目录下 src 下创建一个叫 util 的文件夹用来存放我们封装等功能的一些文件 ，接着我们再创建一个 request.js 的文件来存放

第二步：设置

在 request.js 里面我们写上这样的代码

// 请求模块
import  axios from 'axios'
//放到单独的文件，便于维护
const request = axios.create({
     baseURL: 'https://api.kinovate.cn:8081',  //请求的基本路径
})

//请求拦截器
request.interceptors.request.use(
    // 在发送请求之前做些什么,所有请求都会经过这里
    // config是当前请求相关的配置信息对象
    //config是可以修改的
    //然后我们就可以在请求出去时定制统一的业务功能
    //例如 设置统一的 ；token

)
//响应拦截器


//导出请求方法
export default request

//谁使用谁就要加载request模块
// import request from 'request.js'
// request.xxx
// request({
//     method: '',
//     url: ''
// })

接着

接着我们在src下创建 api 这个文件夹用来存放管理接口，用法上面的注释有写，这里就展示张图吧，大家

最后

在最后调用这个接口也很简单啦！如图使用。那么以后我们管理我们的接口就能轻松愉快的了，也不怕后台小哥哥，突然告诉你更改了接口，你要改很多地方啦，同时我们的代码也一目了然，我们可以根据不同的对象存放对应的接口。无论是要设置拦截器，还是统一设置token，yes！！

总结

在这里介绍了在vue 项目里的两个封装，非常便捷的进行管理我们的代码，也能带来一定的优化，和美观。赶快学起来吧~~