首页手记 Element-plus入门：简洁教程

Element-plus入门：简洁教程

标签：

前端工具 Vue.js

概述

Element-Plus 是一个基于 Vue 3 的高质量组件库，它继承了 Vue 2 版本的 Element UI 的优秀特性，并且针对 Vue 3 进行了全面优化。本文将详细介绍 Element-Plus 入门的安装和配置方法，包括如何安装、引入样式和全局注册组件。此外，还将展示一些基础组件的使用示例，帮助读者快速上手。

Element-Plus 简介

Element-Plus 是一个基于 Vue 3 的高质量组件库，它继承了 Vue 2 版本的 Element UI 的优秀特性，并且针对 Vue 3 进行了全面优化。Element-Plus 的设计遵循 Google 的 Material Design 和阿里巴巴的 Ant Design，这使得它在美观性、易用性和可维护性方面都具有很高的水平。

什么是 Element-Plus

Element-Plus 是一款 Vue 3 版本的 UI 组件库，旨在为开发者提供一套简洁、直观且易用的组件，以满足各种前端开发的需求。它包括了丰富的组件，如表单、按钮、对话框、导航等，并且通过 Vue 3 的 Composition API 提供了更灵活的组件使用方式。

Element-Plus 的优势

Element-Plus 的优势主要体现在以下几个方面：

支持 Vue 3 特性：Element-Plus 是基于 Vue 3 开发的，充分利用了 Vue 3 的 Composition API，使得代码更简洁、更易维护。
丰富的组件集：Element-Plus 提供了一套完整的组件集，包括按钮、表单、导航、对话框等，满足各种前端开发需求。
美观的样式：Element-Plus 的组件样式遵循 Material Design 和 Ant Design 的标准，使得界面更加美观和统一。
强大的定制能力：Element-Plus 支持自定义主题和样式，可以根据项目的需求进行灵活的定制。

如何安装 Element-Plus

安装 Element-Plus 非常简单，可以通过 npm 或 yarn 进行安装。以下是使用 npm 安装 Element-Plus 的步骤：

安装 Element-Plus
```
npm install element-plus --save
```
引入 Element-Plus 样式
在项目的入口文件（如 main.js 或 main.ts）中引入样式文件：
```
import 'element-plus/dist/index.css';
```

创建全局组件实例（可选）
如果希望全局注册 Element-Plus 的所有组件，可以在入口文件中创建一个全局组件实例：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

这样就完成了 Element-Plus 的安装和基本配置。

快速上手

创建第一个 Element-Plus 项目

要创建一个新的 Vue 3 项目并使用 Element-Plus，可以按照以下步骤操作：

创建 Vue 项目
使用 Vue CLI 创建一个新的 Vue 项目：
```
vue create my-element-plus-project
```
安装 Element-Plus
在项目根目录下安装 Element-Plus：
```
npm install element-plus --save
```

配置项目环境
修改项目的入口文件（如 main.js 或 main.ts），引入 Element-Plus 样式文件并全局注册组件：

import 'element-plus/dist/index.css';
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

配置项目环境

配置项目环境主要是确保 Vue 3 项目能够正确加载 Element-Plus 的样式和组件。除了在入口文件中引入样式和全局注册组件外，还需要确保项目的配置符合 Vue 3 的标准。以下是具体的配置步骤：

修改项目配置文件
在 Vue CLI 创建的项目中，通常会有一个 vue.config.js 配置文件。如果需要自定义一些配置，可以在这个文件中进行修改：
```
module.exports = {
 css: {
   extract: false, // 开发阶段不提取 CSS
 },
};
```

全局注册组件
在项目的入口文件中，全局注册 Element-Plus 组件：

import 'element-plus/dist/index.css';
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

使用组件
在 App.vue 文件中，可以直接使用 Element-Plus 的组件：

<template>
 <div id="app">
   <el-button type="primary">按钮</el-button>
 </div>
</template>

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

引入 Element-Plus 样式

在实际项目中，需要确保 Element-Plus 的样式文件正确引入。如果使用全局注册组件的方式，只需在入口文件中引入样式文件即可：

import 'element-plus/dist/index.css';

如果需要按需引入组件和样式，可以使用 import 语句单独引入组件和样式：

import { Button } from 'element-plus';
import 'element-plus/theme-chalk/src/button.scss';

export default {
  components: {
    Button,
  },
};

基础组件使用

按钮组件

按钮组件是 Element-Plus 中最常用的组件之一。它提供了多种样式和功能，可以满足不同的使用场景。

示例代码

在 App.vue 文件中使用按钮组件：

<template>
  <div id="app">
    <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>
  </div>
</template>

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

<style>
#app {
  text-align: center;
}
</style>

输入框组件

输入框组件用于收集用户输入的数据，提供了多种输入类型和功能。

示例代码

在 App.vue 文件中使用输入框组件：

<template>
  <div id="app">
    <el-input placeholder="请输入内容"></el-input>
    <el-input placeholder="请输入内容" type="textarea"></el-input>
  </div>
</template>

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

<style>
#app {
  text-align: center;
}
</style>

表单组件

表单组件用于收集用户填写的数据，提供了多种表单元素和验证功能。

示例代码

在 App.vue 文件中使用表单组件：

<template>
  <div id="app">
    <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 label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

布局与导航

栅格布局

栅格布局用于实现页面的响应式布局，Element-Plus 提供了强大的栅格系统，支持多种布局方式。

示例代码

在 App.vue 文件中使用栅格布局：

<template>
  <div id="app">
    <el-row>
      <el-col :span="12">Col-12</el-col>
      <el-col :span="12">Col-12</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">Col-6</el-col>
      <el-col :span="6">Col-6</el-col>
      <el-col :span="6">Col-6</el-col>
      <el-col :span="6">Col-6</el-col>
    </el-row>
  </div>
</template>

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

<style>
#app {
  text-align: center;
}
</style>

导航菜单

导航菜单用于实现页面的导航功能，Element-Plus 提供了多种导航菜单组件，如侧边栏导航和面包屑导航。

示例代码

在 App.vue 文件中使用侧边栏导航：

<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <el-menu>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-setting"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <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-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

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

<style>
#app {
  text-align: center;
}
</style>

模态框

模态框用于显示模态弹出框，Element-Plus 提供了多种模态框组件，如对话框和提示框。

示例代码

在 App.vue 文件中使用对话框组件：

<template>
  <div id="app">
    <el-button type="text" @click="dialogVisible = true">打开对话框</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

色彩与主题

使用色板

Element-Plus 提供了丰富的色板，可以通过这些色板来设置组件的背景色、文字颜色等。

示例代码

在 App.vue 文件中使用色板：

<template>
  <div id="app">
    <el-button type="primary" style="background-color: #409eff; color: #fff;">主要按钮</el-button>
    <el-button type="success" style="background-color: #67c23a; color: #fff;">成功按钮</el-button>
    <el-button type="info" style="background-color: #909399; color: #fff;">信息按钮</el-button>
    <el-button type="warning" style="background-color: #e6a23c; color: #fff;">警告按钮</el-button>
    <el-button type="danger" style="background-color: #f56c6c; color: #fff;">危险按钮</el-button>
  </div>
</template>

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

<style>
#app {
  text-align: center;
}
</style>

自定义主题

Element-Plus 支持自定义主题，可以通过修改 CSS 变量来改变组件的样式。

示例代码

在 App.vue 文件中自定义主题：

<template>
  <div id="app">
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

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

<style>
/* 修改组件样式 */
:root {
  --el-color-primary: #ff4500;
  --el-color-primary-light-7: #ff7b4d;
  --el-color-primary-light-9: #ff8c64;
  --el-color-primary-light-12: #ff9f7a;
  --el-color-primary-light-13: #ffaa8c;
  --el-color-primary-light-14: #ffbb9a;
  --el-color-primary-light-15: #ffbeab;
  --el-color-primary-light-8: #ff5a2e;
  --el-color-primary-dark-1: #e6491e;
  --el-color-primary-dark-2: #d63f15;
  --el-color-primary-dark-3: #c6350e;
  --el-color-primary-dark-4: #b6310b;
  --el-color-primary-dark-5: #a62c08;
  --el-color-primary-dark-6: #962805;
  --el-color-primary-dark-7: #862402;
  --el-color-primary-light-10: #ff875f;
  --el-color-primary-light-11: #ff986e;
  --el-color-primary-light-6: #ff6e2e;
  --el-color-primary-light-5: #ff6624;
  --el-color-primary-light-4: #ff601e;
  --el-color-primary-light-3: #ff5a18;
  --el-color-primary-light-2: #ff5412;
}

#app {
  text-align: center;
}
</style>

主题切换

Element-Plus 还支持在运行时动态切换主题，可以通过修改 CSS 变量来实现。

示例代码

在 App.vue 文件中实现主题切换：

<template>
  <div id="app">
    <el-button type="primary">主要按钮</el-button>
    <el-button type="primary" @click="toggleTheme">切换主题</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleTheme() {
      const themeToggle = (key, value) => {
        const cssVars = document.documentElement.style;
        cssVars.setProperty(key, value);
      };

      themeToggle('--el-color-primary', '#ff4500');
      themeToggle('--el-color-primary-light-7', '#ff7b4d');
      themeToggle('--el-color-primary-light-9', '#ff8c64');
      themeToggle('--el-color-primary-light-12', '#ff9f7a');
      themeToggle('--el-color-primary-light-13', '#ffaa8c');
      themeToggle('--el-color-primary-light-14', '#ffbb9a');
      themeToggle('--el-color-primary-light-15', '#ffbeab');
      themeToggle('--el-color-primary-light-8', '#ff5a2e');
      themeToggle('--el-color-primary-dark-1', '#e6491e');
      themeToggle('--el-color-primary-dark-2', '#d63f15');
      themeToggle('--el-color-primary-dark-3', '#c6350e');
      themeToggle('--el-color-primary-dark-4', '#b6310b');
      themeToggle('--el-color-primary-dark-5', '#a62c08');
      themeToggle('--el-color-primary-dark-6', '#962805');
      themeToggle('--el-color-primary-dark-7', '#862402');
      themeToggle('--el-color-primary-light-10', '#ff875f');
      themeToggle('--el-color-primary-light-11', '#ff986e');
      themeToggle('--el-color-primary-light-6', '#ff6e2e');
      themeToggle('--el-color-primary-light-5', '#ff6624');
      themeToggle('--el-color-primary-light-4', '#ff601e');
      themeToggle('--el-color-primary-light-3', '#ff5a18');
      themeToggle('--el-color-primary-light-2', '#ff5412');
    },
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

常见问题与解决方案

常见错误及其解决办法

在使用 Element-Plus 的过程中，可能会遇到一些常见的错误，以下是一些常见的错误及其解决方法：

组件未找到错误
- 错误信息：[Vue warn]: Unknown custom element: <el-button> - did you register the component correctly?
- 解决方法：确保在入口文件中全局注册了组件，或者在组件中局部引入了组件。
样式未加载错误
- 错误信息：[Vue warn]: Failed to mount component: template or render function not defined.
- 解决方法：确保在入口文件中引入了 Element-Plus 的样式文件。
组件属性未识别错误
- 错误信息：[Vue warn]: Property or method "close" is not defined on the instance.
- 解决方法：确保组件的事件处理函数已经定义。

组件优化技巧

在使用 Element-Plus 组件时，可以通过以下技巧来优化组件的性能和用户体验：

按需引入组件
- 只引入需要使用的组件，避免引入不必要的组件。
```
import { Button } from 'element-plus';
```
使用 Composition API
- 通过 Composition API 重构组件，使代码更加简洁和易于理解。
```
import { defineComponent } from 'vue';
import { Button } from 'element-plus';
```
export default defineComponent({
components: {
Button,
},
});
组件懒加载
- 对于大型应用，可以使用动态导入的方式实现组件的懒加载。
```
import { defineComponent, lazy } from 'vue';
import { Button } from 'element-plus';
```
const LazyButton = lazy(() => import('element-plus/components/button'));

export default defineComponent({
components: {
Button: LazyButton,
},
});

常用资源链接

以下是一些常用的资源链接，帮助你更好地学习和使用 Element-Plus：

官网文档：https://element-plus.org/en-US/
GitHub 仓库：https://github.com/element-plus/element-plus
论坛支持：https://github.com/element-plus/element-plus/discussions
慕课网教程：https://www.imooc.com/learn/1217

通过这些资源，你可以获取更多关于 Element-Plus 的详细信息和实用教程。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

HUWWW

手记
篇

粉丝

37

获赞与收藏

133

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31416 348

网络编程入门教程

20个小节 12873 242

Pandas 入门教程

25个小节 18755 351

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Element-plus入门：简洁教程

什么是 Element-Plus

Element-Plus 的优势

如何安装 Element-Plus

创建第一个 Element-Plus 项目

配置项目环境

引入 Element-Plus 样式

按钮组件

示例代码

输入框组件

示例代码

表单组件

示例代码

栅格布局

示例代码

导航菜单

示例代码

模态框

示例代码

使用色板

示例代码

自定义主题

示例代码

主题切换

示例代码

常见错误及其解决办法

组件优化技巧

常用资源链接

阅读免费教程