CarmenSystem
前言
前面几章主要专注与后端开发,以及前后端项目调通,本章开始将注重前端界面的优化,由于本人不是专门做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