后台管理系统----配置和封装(1)

前言：

后台管理系统，很多人都感觉后台管理系统很难，其实它并不是难，而是觉得它难的人没有熟悉Element-ui,只要熟悉了Element-ui,运用的熟练了,我们不说后台管理系统就会特别简单，但它简单一点还是可以的。这里我就给大家简单讲解一下我的项目。Element-ui的官网

现在开始我们的项目讲解，当然每个人有每个人的写法，我的讲解和写法可能并不适合每个人，但还是会有一点帮助的。

首先写这个项目的时候我们要考虑我们使用Element-ui使用全局引入还是按需导入，这里我推荐用按需导入，这样在后期打包优化时可以压缩代码，减小体积。

写这个项目首先你要创建一个模板，每个人都有自己喜欢的模板，这里我就不说创建模板了，我们现在直接开始项目

一、创建完模板后首先去配置封装API，还有Element-ui要按需引入的文件

封装API，在这里我创建了一个utils文件里面包含了api.js、env.js、request.js

env.js文件是干什么的？它用来封装我们的项目接口

如果后期需要打包或测试，只需要在prod下面接着写接口就可以了

request.js文件是干什么的？它是用来封装axios和请求拦截、响应拦截的

api.js是用来干什么的？它是用来封装我们需要用到的功能接口

每封装一个接口都需要在下面的export中导出不然无法使用，而且每个定义的名称必须用英文的逗号隔开

那么封装API就结束了，下面来说一下按需引入的Element-ui

二、Element-ui的按需引入

首先要想使用Element-ui的按需引入你要去下载一下按需引入的插件

1.首先先安装Element-ui

npm i element-ui -S

2.将下面的代码引入到man.js中

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

二、按需引入Element-ui

1.先安装按需引入的插件

npm install babel-plugin-component -D

2.安装好后我创建了一个plugins文件，里面有一个element.js文件，element.js文件就是用来放我们所需要用到的element-ui的组件

下面的是element.js

我们需要什么组件就在Vue.use(需要用到的组件)写什么组件，开头必须要大写，然后我们就在最下边引入需要用到的组件，要用英文的都号隔开。