CodeMT
CodeMT

中后台UI库使用对比：Element/iview

Element UI

官网：https://element.eleme.cn/#/zh-CN
GitHub：https://github.com/ElemeFE/element

1、什么是ElementUI？

Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库，可用来构建中大型后台管理项目

1.1、搭建elementUI脚手架(vue-admin-template)

# Clone project
git clone https://github.com/PanJiaChen/vue-admin-template.git 
# Install dependencies
npm install 
# Serve with hot reload at localhost:9528
npm run dev 
# Build for production with minification
npm run build 
# Build for production and view the bundle analyzer report
npm run build --report
  • 在执行完npm run dev后发现浏览器自动打开了vue-admin-template登录页面，点击登录，此时模板页面就搭建好了。

打开文件夹vue-admin-template，主要的目录结构如下图所示：

1.2 项目初始化调整

1.2.1 关闭语法规范性检查

修改config/index.js ，将useEslint的值改为false。

此配置作用: 是否开启语法检查，语法检查是通过ESLint 来实现的。

我们现在科普一下,什么是ESLint :

  • ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写 分号等等，这些规则其实是可以设置的。作为初学者，最好先关闭这种校验，否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发，建议开启。

1.2.2 国际化设置

  • 打开main.js 找到这句代码
import locale from 'element‐ui/lib/locale/lang/en'
  • 我们将en修改为zn-CN
import locale from 'element‐ui/lib/locale/lang/zh‐CN'

修改后组件都是按照中文的习惯展示

1.2.3 与easy-mock对接

(1) 修改config下的dev.env.js中的BASE_API为easy-mock的Base URL

....  
BASE_API: '"http://10.211.5.3:7300/mock/5af314a4c612420d0d7650c7"',  
....

修改后发现无法登录上vue-admin-templates，原因是修改了BASE_API，需要在自己的Easy-mock中修改验证

(2) easy-mock添加登陆认证模拟数据 地址: /user/login

提交方式:post

内容:

{  
  "code": 20000,  
  "data": {    
    "roles": ["admin"],    
    "role": ["admin"],    
    "name": "admin",    
    "avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"  
  }
}

(3) 添加返回用户信息url模拟数据 地址:/user/info

提交方式:get

内容:

{  
  "code": 20000,  
  "data": {    
    "roles": ["admin"],    
    "role": ["admin"],    
    "name": "admin",    
    "avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"  
  }
}

此时又可以登录上vue-admin-template，且成功与自己的easy-mock对接上了。

2.elementUI的table组件,实现列表展示

(1) 在src/api/下创建gathering.js，书写代码：

import request from '@/utils/request'
export default{    
  getList(){        
    return request({                
      url:'/gathering/gathering',                
      method:'get'            
    });    
  }
}

导入request模块实际上是对ajax的封装(在utils/request.js中)，上述的url和method即为请求的url和method

(2) 在views/table中创建 gathering.vue

vue主要分为视图区