itcats_cn
itcats_cn

ElementUI快速入门

本文主要从几个方面快速入门ElementUI

1、什么是ElementUI ？ 掌握elementUI脚手架搭建

2、掌握elementUI的table组件的使用，实现列表功能

3、掌握elementUI的pagination组件的使用，实现分页功能

4、掌握elementUI的form相关组件的使用，实现条件查询功能

5、掌握elementUI的dialog组件和$message的使用，实现弹出窗口和消息提示功能

6、掌握elementUI的select组件的使用，实现下拉列表功能实现新增数据和修改数据的功能

7、掌握confirm的使用，实现询问框，实现删除功能

 

1、什么是ElementUI？

Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库

官网: http://element.eleme.io/#/zh-CN

 

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，主要的目录结构如下图所示：

ElementUI快速入门_第1张图片

 

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主要分为视图区