参考资料

  1. python web ui组件库
  2. web原生ui组件库
  3. docx和doc的转换
  4. docx和doc的区别
  5. doc是什么意思
  6. 模块化web ui组件库
  7. xls是什么文件
  8. web ui组件库有哪些

element ui 便捷的 ui 组件库

Element UI 详细说明

  1. 基本介绍

  • 基于 Vue 2.0 的组件库

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

  • MIT 开源协议

  1. 主要特性

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

  • 响应式设计

  • 主题定制能力

  • 国际化支持

  • 良好的文档和示例

  1. 安装方法

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>
  1. 基本使用示例

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>
  1. 常用组件

  • 基础组件: Button, Layout, Container

  • 表单组件: Input, Select, DatePicker

  • 数据展示: Table, Tag, Progress

  • 通知类: Message, Notification

  • 导航类: Menu, Tabs

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

$--color-primary: #409EFF;
@import "~element-ui/packages/theme-chalk/src/index";
  1. 浏览器支持

  • 现代浏览器

  • IE 10+

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