Vue+SpringBoot实践（八）：使用Element-UI优化界面

前言

前面几章主要专注与后端开发，以及前后端项目调通，本章开始将注重前端界面的优化，由于本人不是专门做UI设计的，没必要花过多时间在界面优化上面，故我们需要借助Element-UI工具。

一、引入Element-UI

Element 的官方地址为 http://element-cn.eleme.io/#/zh-CN，该网站为我们提供了丰富的组件样例，点击网站中的“显示代码”，复制需要部分。使用npm进行安装npm i element-ui -S
根据官方文档，我们这里将进行全部引入，修改src/main.js如下：

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

Vue.config.productionTip = false

// 设置反向代理
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8663/api'

// 全局注册，其他组件可通过this.$axios发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

// eslint-disable-next-line no-undef
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
   
  el