Element+

https://element-plus.gitee.io/zh-CN/

什么是Element Plus

Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus是基于Vue3面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型。

设计原则

一致 Consistency#
- 与现实生活一致
- 在界面中一致
反馈 Feedback#
- 控制反馈
- 页面反馈
效率 Efficiency#
- 简化流程
- 清晰明确
- 帮助用户识别
可控 Controllability#
- 用户决策
- 结果可控

主要组件

分类	常见组件
Basic 基础组件	Button 按钮、Border 边框、Color 色彩、Container 布局容器、Icon 图标、Layout 布局、Link 链接、Scrollbar 滚动条、Space 间距、Typography 排版
Form 表单组件	Autocomplete 自动补全输入框、Cascader 级联选择器、Checkbox 多选框、Color Picker 取色器、Date Picker 日期选择器、DateTime Picker 日期时间选择器、Form 表单、Input 输入框、Input Number 数字输入框、Radio 单选框、Select 选择器、Virtualized Select 虚拟化选择器、Slider 滑块、Switch 开关、Time Picker 时间选择器、Time Select 时间选择、Transfer 穿梭框、Upload 上传
Data 数据展示	Avatar 头像、Badge 徽章、Calendar 日历、Card 卡片、Carousel 走马灯、Collapse 折叠面板、Descriptions 描述列表、Empty 空状态、Image 图片、Infinite Scroll 无限滚动、Pagination 分页、Progress 进度条、Result 结果、Skeleton 骨架屏、Table 表格、Virtualized Table 虚拟化表格、Tag 标签、Timeline 时间线、Tree 树形控件、TreeSelect 树形选择、Virtualized Tree 虚拟化树形控件
Feedback 反馈组件	Alert 提示、Dialog 对话框、Drawer 抽屉、Loading 加载、Message 消息提示、MessageBox 消息弹出框、Notification 通知、Popconfirm 气泡确认框、Popover 弹出框、Tooltip 文字提示

Hello World!

hello.html
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/vue.js"></script>
  <script src="./js/element-plus.js"></script>
  <title>Element Plus demo</title>
</head>

<body>
  <div id="app" data-v-app="">
    <button class="el-button" aria-disabled="false" type="button">
      <!--v-if--><span class="">Hello Element Plus</span>
    </button>
  </div>
  <script>
    const App = {
      data() {
        return {
          message: "Hello Element Plus",
        };
      },
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
  </script>

</body>

</html>