【Element UI详细介绍】

最新推荐文章于 2025-04-15 09:48:09 发布

程序员不想YY啊

最新推荐文章于 2025-04-15 09:48:09 发布

阅读量1.1w

点赞数 32

分类专栏： ui vue.js 前端文章标签： ui vue.js java 前端

本文链接：https://blog.csdn.net/cz88888888666/article/details/135705836

版权

本文详细介绍了ElementUI，一个基于Vue2.0的桌面端组件库，包括其安装步骤、开发示例（如创建弹出框）、特点（如简单易用、配置灵活等）、组件分类和使用注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Element UI

Element UI 是一个基于 Vue 2.0 的桌面端组件库，主要用于构建快速、简洁的用户界面，Element UI 提供一套丰富的组件和工具，能够帮助开发者快速构建高质量的 Vue 应用，它由饿了么前端团队开发，并且开放源代码。

官网链接: 官网
另外一个与ElmentUI类似提供基于Vue2.0的组件库是iview

1.1 Vue+ElementUI安装

<!-- 1. 导入css -->
<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
<!-- 2. 引入vue和vue-router-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!-- 未使用vue路由功能可不导入 -->
<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
<!-- 3. 引入ElementUI组件 -->
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

1.2 开发示例

开发一个基于vue+elementui的弹出框。
1）在HBuilder中建立一个基本html项目，在项目中创建一个html页面文件，导入必要的css及js文件（即安装）

<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 1. 导入css -->
    <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
    <!-- 2. 引入vue和vue-router-->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <!-- 未使用vue路由功能可不导入 -->
    <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js">