element ui 便捷的 ui 组件库

参考资料

1. python web ui组件库
2. xls和xlsx的区别
3. docx怎么转换成doc
4. docx是word文件吗
5. xlsx和excel一样吗
6. docx是什么格式的文件
7. docx和doc的哪个好
8. xls是什么文件

Element UI 详细说明

1. 基本介绍

• 基于 Vue 2.0 的组件库

• 由饿了么前端团队开发维护

• MIT 开源协议

2. 主要特性

• 丰富的组件集合(60+)

• 响应式设计

• 主题定制能力

• 国际化支持

• 良好的文档和示例

3. 安装方法

npm 安装:

npm install element-ui -S

CDN 引入:

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

4. 基本使用示例

main.js 配置:

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

Vue.use(ElementUI)

组件使用示例:

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
    <el-date-picker v-model="date"></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: ''
    }
  }
}
</script>

5. 常用组件

• 基础组件: Button, Layout, Container

• 表单组件: Input, Select, DatePicker

• 数据展示: Table, Tag, Progress

• 通知类: Message, Notification

• 导航类: Menu, Tabs

6. 主题定制
   支持通过 SCSS 变量覆盖方式定制主题:

$--color-primary: #409EFF;
@import "~element-ui/packages/theme-chalk/src/index";

7. 浏览器支持

• 现代浏览器

• IE 10+

• 需要 babel-polyfill 支持旧浏览器