element-ui简介、安装和使用代码

alankuo

于 2024-10-11 08:15:04 发布

阅读量566

点赞数 16

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/alankuo/article/details/142701535

版权

前端专栏收录该内容

189 篇文章 0 订阅

订阅专栏

一、Element-UI简介

Element-UI是一套基于Vue.js的桌面端组件库，由饿了么前端团队开源。它提供了丰富的组件，如按钮、表单、表格、菜单、对话框等，这些组件具有统一的视觉风格和交互设计，能够帮助开发者快速构建美观、易用的Web应用程序。

Element-UI的特点包括：

丰富的组件库
- 涵盖了Web应用开发中常见的各种组件需求，无论是简单的UI元素还是复杂的交互组件都能找到，大大减少了开发过程中的组件开发工作量。
基于Vue.js
- 与Vue.js深度集成，充分利用Vue.js的响应式数据绑定、组件化等特性，使得在Vue项目中使用Element-UI非常方便、自然。
自定义性
- 虽然提供了默认的样式和功能，但也允许开发者根据项目需求进行一定程度的定制，如修改主题颜色、组件样式等。
良好的文档和社区支持
- 拥有详细的官方文档，文档中包含了每个组件的用法、示例和API说明等，方便开发者学习和使用。同时，也有活跃的社区，开发者可以在社区中获取帮助、分享经验和贡献代码。

二、安装

创建Vue项目（如果还未创建）
- 确保已经安装了vue-cli。如果没有，可以使用以下命令全局安装：
```
npm install - g vue-cli
```
- 然后创建一个新的Vue项目：
```
vue create my-vue-project
```
- 在创建项目的过程中，可以选择默认配置或者根据自己的需求进行自定义配置。
安装Element-UI
- 进入到创建好的Vue项目目录（my-vue-project）中，使用以下命令安装Element-UI：
```
npm install element-ui --save
```
完整引入（在main.js中）
- 在main.js文件中完整引入Element-UI的组件库、样式等：
```
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme - default/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
```
- 这里首先导入Vue、ElementUI组件库和默认主题的样式文件，然后通过Vue.use(ElementUI)注册Element-UI组件库，使得在整个Vue项目中可以使用这些组件。

按需引入（可选，推荐用于优化项目体积）

如果想要按需引入Element-UI的组件，可以借助babel-plugin-component插件。
首先安装插件：

npm install babel-plugin-component -save -dev

然后在.babelrc文件（如果没有则创建）中配置插件：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme - default"
      }
    ]
  ]
}

现在就可以按需引入组件了，例如在一个Vue组件中只引入Button组件：

import Vue from 'vue';
import { Button } from 'element-ui';
import App from './App.vue';

Vue.component('el-button', Button);

new Vue({
  el: '#app',
  render: h => h(App)
});

三、使用代码示例

以下是一些Element-UI组件的简单使用示例：

按钮组件（Button）

在一个.vue组件中，如HelloWorld.vue：

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
};
</script>

这里展示了不同类型（primary、success、warning、danger）的Element-UI按钮组件的使用。

表单组件（Form）

<template>
  <el-form :model="form">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    submitForm() {
      console.log('提交表单，用户名：', this.form.username, '密码：', this.form.password);
    }
  }
};
</script>

这个示例展示了一个简单的表单，包含用户名和密码输入框以及提交按钮。通过v-model实现了数据双向绑定，当点击提交按钮时，可以在控制台看到输入的用户名和密码。

表格组件（Table）

<template>
  <el - table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el - table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 25,
          address: '北京'
        },
        {
          name: '李四',
          age: 30,
          address: '上海'
        }
      ]
    };
  }
};
</script>