Element Ul组件库的介绍安装使用

介绍：：

介绍：：：
 			在前端开发中，UI 组件库是提高开发效率和优化用户体验的重要工具之一。
 	Element UI 是一套基于 Vue.js 的组件库，提供了丰富的 UI 组件和交互效果，能够快速
 	搭建出现代化的 Web 应用程序。

安装使用：：

1.通过 npm 安装 Element UI 是最常见的方式。在项目目录下运行以下命令：
	npm install element-plus --save

2.在项目的入口文件（如 main.js）中引入 Element UI 的样式文件：
	import 'element-plus/lib/theme-chalk/index.css';

3.如果你想按需加载 Element UI 的组件，可以使用 babel 插件 babel-plugin-import。在 babel.config.js 中配置：
	module.exports = {
	  plugins: [
	    ['element-plus', { libraryName: 'element-plus', styleLibraryName: 'theme-chalk' }]
	  ]
	};
	
4.注册 Element UI 组件
	在你的 Vue 应用中，可以全局注册 Element UI 组件，或者按需注册。
	全局注册示例：：：
		import { createApp } from 'vue';
		import ElementPlus from 'element-plus';
		import 'element-plus/lib/theme-chalk/index.css';
		
		const app = createApp(App);
		app.use(ElementPlus);
		app.mount('#app');

5.在 Vue 组件中，你可以直接使用 Element UI 提供的各种组件，例如按钮、表单、弹窗等
	<template>
	  <el-button type="primary">主要按钮</el-button>
	</template>
	
	<script setup>
	import { ElButton } from 'element-plus';
	
	// 在 setup 函数中注册组件
	const components = [ElButton];
	</script>

实例：

1.按钮：：：：：
	<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>

2.表单：：：：：
	<template>
	  <el-form ref="form" :model="form" label-width="80px">
	    <el-form-item label="用户名" prop="username">
	      <el-input v-model="form.username"></el-input>
	    </el-form-item>
	    <el-form-item label="密码" prop="password">
	      <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-button @click="resetForm">重置</el-button>
	    </el-form-item>
	  </el-form>
	</template>
	
	<script>
	export default {
	  data() {
	    return {
	      form: {
	        username: '',
	        password: ''
	      }
	    };
	  },
	  methods: {
	    submitForm() {
	      this.$refs.form.validate(valid => {
	        if (valid) {
	          // 表单验证通过，提交数据
	          console.log('表单验证通过');
	        } else {
	          // 表单验证失败
	          console.log('表单验证失败');
	          return false;
	        }
	      });
	    },
	    resetForm() {
	      this.$refs.form.resetFields();
	    }
	  }
	};
	</script>

3.Table表格
	<template>
	  <el-table :data="tableData">
	    <el-table-column prop="date" label="日期" width="180"></el-table-column>
	    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
	    <el-table-column prop="address" label="地址"></el-table-column>
	  </el-table>
	</template>
	
	<script>
	export default {
	  data() {
	    return {
	      tableData: [
	        { date: '2024-02-20', name: '张三', address: '上海市' },
	        { date: '2024-02-21', name: '李四', address: '北京市' },
	        { date: '2024-02-22', name: '王五', address: '广州市' },
	        { date: '2024-02-23', name: '赵六', address: '深圳市' }
	      ]
	    };
	  }
	};
	</script>