ElementUI实战：新手入门与基础组件使用教程

本文详细介绍了ElementUI实战，从环境搭建到基础组件的使用，涵盖了布局、表单、导航、按钮以及消息提示等组件的入门教程，帮助新手快速掌握ElementUI的使用方法。

ElementUI介绍

ElementUI是基于Vue的桌面端前端UI库，提供了丰富的可复用组件，包括基础的按钮、输入框和复杂的表格、导航等，极大便利了前端开发。遵循Google的Material Design设计规范，ElementUI以其简洁优雅的风格，帮助开发者高效地构建美观的界面。

开发环境准备

为了开始使用ElementUI，你需要准备一个符合要求的开发环境。以下步骤可以帮助你完成所需的环境配置：

1. Node.js：推荐安装最新版本的Node.js（版本14或以上）。你可以从官方网站下载安装。

2. Vue.js：确保安装了Vue CLI（Vue命令行工具）。可以使用npm或yarn进行安装：

   npm install -g @vue/cli
   # 或
   yarn global add @vue/cli

3. IDE：推荐使用Visual Studio Code或其他代码编辑器，确保编辑器支持Vue.js和ESLint等工具。

安装与配置ElementUI

安装ElementUI的过程相对简单。首先，创建一个新的Vue项目：

vue create my-elementui-app

进入项目文件夹并安装ElementUI：

cd my-elementui-app
npm install element-ui --save

在项目的入口文件（如main.js）中配置ElementUI：

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

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

经过以上步骤，你就可以在项目中使用ElementUI组件了。

Row与Col组件讲解

Row和Col组件用于构建响应式网格布局。Row代表行，Col则是列。通过Row组件包裹Col组件，可以实现灵活的布局。

基本布局示例

下面通过一个简单的示例来展示如何使用Row和Col组件。

1. 创建布局组件：在src/components目录下创建一个LayoutExample.vue组件：

   <template>
     <el-row>
       <el-col :span="8">第一列</el-col>
       <el-col :span="8">第二列</el-col>
       <el-col :span="8">第三列</el-col>
     </el-row>
   </template>
   
   <script>
   export default {
     name: 'LayoutExample'
   };
   </script>

2. 在App组件中使用：在src/App.vue文件中引入并使用LayoutExample组件：

   <template>
     <div id="app">
       <layout-example></layout-example>
     </div>
   </template>
   
   <script>
   import LayoutExample from './components/LayoutExample.vue';
   
   export default {
     components: {
       LayoutExample
     }
   };
   </script>

动态布局的实现

我们可以通过动态设置span属性来实现动态布局。例如，基于某个条件来改变列的宽度：

<template>
  <div>
    <el-row>
      <el-col :span="dynamicSpan">动态列</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicSpan: 8
    };
  }
};
</script>

通过data属性中的dynamicSpan变量控制列的宽度，可以使用条件逻辑动态修改dynamicSpan值，实现布局的动态变化。

Input输入框组件

Input组件用于创建输入框。以下是一个输入框组件的简单示例：

<template>
  <div>
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

Select选择器组件

Select组件用于创建下拉选择框：

<template>
  <div>
    <el-select v-model="selectedOption" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: '选项1', label: '选项1' },
        { value: '选项2', label: '选项2' },
        { value: '选项3', label: '选项3' }
      ]
    };
  }
};
</script>

Switch开关组件

Switch组件用于创建开关按钮，可以用在需要开启/关闭状态的场景：

<template>
  <div>
    <el-switch v-model="switchValue"></el-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      switchValue: false
    };
  }
};
</script>

表单验证实例

表单验证可以通过rules属性来实现。下面是一个简单的表单验证示例：

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('提交失败!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

Menu菜单组件

Menu组件用于创建导航菜单。以下是一个基本的菜单组件示例：

<template>
  <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">导航一</span>
      </template>
      <el-menu-item-group>
        <span slot="title">分组一</span>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <template slot="title">选项4</template>
        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-document"></i>
      <span slot="title">导航三</span>
    </el-menu-item>
  </el-menu>
</template>

Tab标签页组件

Tabs组件用于创建标签页导航：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
      用户管理内容
    </el-tab-pane>
    <el-tab-pane label="配置中心" name="second">
      配置中心内容
    </el-tab-pane>
    <el-tab-pane label="角色管理" name="third">
      角色管理内容
    </el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">
      定时任务补偿内容
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

Breadcrumb面包屑组件

Breadcrumb组件用于创建面包屑导航，以下是一个面包屑组件的简单示例：

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/activity' }">活动中心</el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
  </el-breadcrumb>
</template>

面包屑组件通常用于展示用户当前所在页面的路径，帮助用户理解当前页面的上下文。以下是一个使用面包屑组件的更详细的示例：

<script>
export default {
  data() {
    return {
      pathList: [
        { path: '/', name: '首页' },
        { path: '/activity', name: '活动中心' },
        { path: '/activity/list', name: '活动列表' },
        { path: '/activity/detail', name: '活动详情' }
      ]
    };
  }
};
</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in pathList" :key="item.path" :to="{ path: item.path }">
      {{ item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

使用场景举例

导航与菜单组件可以用于许多场景，例如：

• 网站导航：创建一个网站的导航栏，让用户可以方便地浏览网站的不同部分。
• 管理后台：在管理后台中，可以使用导航组件来组织和展示各种管理功能。
• 多级导航：实现多级导航功能，如嵌套的菜单项和子菜单项。

Button按钮组件基础

Button组件用于创建各种按钮。以下是一个基本的按钮组件示例：

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

按钮的类型与大小

ElementUI提供了多种按钮类型和大小，可以通过type和size属性来设置。以下是一个示例：

<template>
  <el-button type="primary" size="medium">中等按钮</el-button>
  <el-button type="primary" size="small">小按钮</el-button>
  <el-button type="primary" size="mini">迷你按钮</el-button>
</template>

按钮的加载状态与图标

按钮可以设置加载状态和图标。以下是一些示例代码：

<template>
  <el-button type="primary" :loading="true">加载中...</el-button>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>
  <el-button type="primary">
    <i class="el-icon-upload2"></i>
    上传文件
  </el-button>
</template>

Message消息提示

Message组件用于创建消息提示框，可以传递不同的状态信息：

this.$message({
  message: '这是一条消息提示',
  type: 'success'
});

MessageBox对话框

MessageBox组件用于创建对话框，可以用于确认操作或选择选项：

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  this.$message({
    type: 'success',
    message: '删除成功!'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });
});

Toast通知

Toast组件用于创建短时的、无交互的提示信息：

this.$notify({
  title: '成功',
  message: '这是一条成功的提示消息',
  type: 'success'
});

组件配置与使用场景

可以进一步自定义消息提示、对话框和Toast的通知样式和内容。例如：

this.$message({
  message: '这是一条消息提示',
  type: 'info',
  duration: 5000 // 设置消息持续时间
});

this.$alert('这是一条消息提示', '提示', {
  confirmButtonText: '确定',
  callback: action => {
    this.$message({
      type: 'info',
      message: 'action: ' + action
    });
  }
});

通过以上示例，你可以看到ElementUI的各种组件在实际项目中的应用情况。这些组件提供了丰富的功能，帮助开发者更快地构建功能完整、美观的前端应用。

希望这个教程对你的ElementUI学习之旅有所帮助。如果你需要更多关于ElementUI的详细信息，可以参考其官方文档。如果你想进一步学习Vue.js或前端开发，可以访问慕课网，那里有许多优秀的教程和项目案例。