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

一、Element-UI简介

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

Element-UI的特点包括：

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

二、安装

1. 创建Vue项目（如果还未创建）

   • 确保已经安装了vue-cli。如果没有，可以使用以下命令全局安装：

   npm install - g vue-cli
   

   • 然后创建一个新的Vue项目：

   vue create my-vue-project
   

   • 在创建项目的过程中，可以选择默认配置或者根据自己的需求进行自定义配置。

2. 安装Element-UI

   • 进入到创建好的Vue项目目录（my-vue-project）中，使用以下命令安装Element-UI：

   npm install element-ui --save
   

3. 完整引入（在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项目中可以使用这些组件。

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

   • 如果想要按需引入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组件的简单使用示例：

1. 按钮组件（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按钮组件的使用。

2. 表单组件（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实现了数据双向绑定，当点击提交按钮时，可以在控制台看到输入的用户名和密码。

3. 表格组件（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>
   

   • 这里展示了一个简单的表格组件，通过:data属性绑定数据，el-table-column定义表格列的属性（prop对应数据中的字段名，label为显示的列标题）。