首页手记 Element-plus学习入门教程

Element-plus学习入门教程

标签：

Html/CSS 前端工具 Vue.js

概述

本文提供了Element-Plus学习的入门教程，介绍了Element-Plus的基本概念、特点和安装方法。文章详细讲解了如何在Vue项目中引入Element-Plus，并通过示例展示了常用组件的使用方法。此外，还涵盖了样式定制、路由配置等实用技巧。

Element-Plus学习入门教程

1. Element-Plus简介

什么是Element-Plus

Element-Plus 是一个基于 Vue 3 的桌面端组件库，由 Element UI 演变而来。它提供了丰富的组件库，适用于各种类型的 Web 应用程序，帮助开发者快速构建出美观且功能完备的用户界面。Element-Plus 同时还维护了一个基于 Vue 2 的版本，以兼容旧项目的需求。

Element-Plus的特点和优势

简洁美观：Element-Plus 继承了 Element UI 简洁、舒适的风格，使用现代化的 UI 设计，符合用户的视觉习惯。
易用性：组件命名直观，API 使用简单，易于上手，适合各种水平的开发者。
兼容性：支持 Vue 2 和 Vue 3，能够兼容多种浏览器和操作系统。
丰富的文档和社区支持：提供了详尽的官方文档和活跃的社区支持，便于开发者在开发过程中遇到问题时快速解决。
插件化设计：组件可以方便地替换和扩展，使得项目更加灵活。
国际化支持：内置多种语言包，支持国际化，适合多语言环境下的项目开发。

安装Element-Plus

首先，确保已经安装了 Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

接下来，创建一个新的 Vue 项目并安装 Element-Plus：

vue create my-element-plus-project
cd my-element-plus-project
npm install element-plus

在 src/main.js 中引入 Element-Plus：

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

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

2. 快速开始

创建一个Vue项目

首先，创建一个新的 Vue 项目：

vue create my-element-plus-project
cd my-element-plus-project

引入Element-Plus样式和组件

在 src/main.js 中引入 Element-Plus 的样式和组件：

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

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

使用第一个Element-Plus组件

在 src/App.vue 中使用 el-button 组件：

<template>
  <div>
    <el-button type="primary">点击按钮</el-button>
  </div>
</template>

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

<style>
/* 自定义样式 */
</style>

3. 常用界面组件

按钮(Button)

按钮是 UI 中最常用的组件之一，Element-Plus 提供了多种按钮类型，如 primary, success, info, warning, danger 等。

<template>
  <div>
    <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>

输入框(Input)

输入框用于用户输入文本，Element-Plus 支持多种输入框类型，如单行输入框、多行输入框、带验证的输入框等。

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

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

下拉菜单(Dropdown)

下拉菜单用于展示下拉选项，Element-Plus 提供了多种下拉菜单类型，如基本下拉菜单、带分组的下拉菜单等。

<template>
  <el-dropdown>
    <span class="el-dropdown-link">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>黄金糕</el-dropdown-item>
      <el-dropdown-item>狮子头</el-dropdown-item>
      <el-dropdown-item>螺蛳粉</el-dropdown-item>
      <el-dropdown-item>双皮奶</el-dropdown-item>
      <el-dropdown-item>蚵仔煎</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

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

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

对话框(Dialog)

对话框用于展示一个模态对话框，Element-Plus 提供了多种对话框类型，如普通对话框、确认对话框等。

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <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
    }
  }
}
</script>

分页(Pagination)

分页用于实现数据的分页展示，Element-Plus 提供了多种分页类型，如基本分页、带数量选择器的分页等。

<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="sizes, prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage4: 5
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页显示条数为: ${val}`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

4. 样式定制

使用主题定制器

Element-Plus 提供了主题定制器，可以帮助开发者自定义颜色、字体等样式。

# 使用主题定制器生成自定义样式
node scripts/build-theme.js

生成的自定义样式可以导入到项目中：

<template>
  <div>
    <el-button type="primary">自定义主题按钮</el-button>
  </div>
</template>

<script>
import '@/theme/index.css'; // 导入自定义主题样式
export default {
  name: 'App'
}
</script>

自定义变量

Element-Plus 提供了变量文件，可以通过修改变量文件来自定义样式。

/* src/styles/variables.scss */
$--color-primary: #ff0000;
$--font-family: 'Arial', sans-serif;

在 src/main.js 中引入定制变量文件：

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

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

使用CSS变量

Element-Plus 允许通过 CSS 变量来自定义样式。

<template>
  <div style="color: var(--color-primary)">
    使用CSS变量
  </div>
</template>

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

<style>
:root {
  --color-primary: #ff0000;
}
</style>

5. 路由与导航

使用Vue Router进行页面跳转

首先，安装 Vue Router：

npm install vue-router

在 src/router/index.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在 src/main.js 中引入 Vue Router：

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

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

具体页面组件代码示例：

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home页面</h1>
    <el-button type="primary">点击按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About页面</h1>
    <el-button type="primary">点击按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

动态路由配置

动态路由配置允许根据不同的条件动态加载路由组件。

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true
  }
];

具体动态加载的组件代码：

<!-- src/views/User.vue -->
<template>
  <div>
    <h1>User页面</h1>
    <p>用户ID: {{ $route.params.id }}</p>
    <el-button type="primary">点击按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

路由守卫与权限控制

路由守卫可以用来控制路由的访问权限，Element-Plus 可以结合 Vue Router 的导航守卫来实现权限控制。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

具体登录验证和权限控制的实现：

/* src/views/Login.vue */
<template>
  <div>
    <h1>登录页面</h1>
    <el-button type="primary" @click="login">登录</el-button>
  </div>
</template>

<script>
export default {
  name: 'Login',
  methods: {
    login() {
      // 实现登录逻辑，验证用户身份，设置isAuthenticated为true
      this.$router.push('/home');
    }
  }
}
</script>

/* src/views/Home.vue */
<template>
  <div>
    <h1>Home页面</h1>
    <el-button type="primary">点击按钮</el-button>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

6. 实战演练

创建一个简单的CRUD界面

创建一个简单的 CRUD 界面，包含增删改查操作。

增加数据

<template>
  <div>
    <el-button type="primary" @click="addData">添加数据</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', address: '上海市普陀区金沙江路 1518 弄' }
      ]
    };
  },
  methods: {
    addData() {
      this.tableData.push({ name: '李四', address: '上海市普陀区金沙江路 1517 弄' });
    }
  }
}
</script>

修改数据

<template>
  <div>
    <el-button type="primary" @click="editData">编辑数据</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', address: '上海市普陀区金沙江路 1518 弄' }
      ]
    };
  },
  methods: {
    editData() {
      this.tableData[0]['name'] = '王五';
    }
  }
}
</script>

删除数据

<template>
  <div>
    <el-button type="primary" @click="removeData">删除数据</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', address: '上海市普陀区金沙江路 1518 弄' }
      ]
    };
  },
  methods: {
    removeData() {
      this.tableData.splice(0, 1);
    }
  }
}
</script>

集成Element-Plus到现有项目

集成 Element-Plus 到现有项目中：

安装 Element-Plus：
```
npm install element-plus
```

在 src/main.js 中引入 Element-Plus：

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

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

在项目中使用 Element-Plus 组件，例如 el-button：

<template>
 <div>
   <el-button type="primary">点击按钮</el-button>
 </div>
</template>

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

常见问题与解决方法

问题：Element-Plus 组件样式不生效

解决方法：

确认在 src/main.js 中引入了 Element-Plus 样式文件：
```
import 'element-plus/dist/index.css';
```
确认在 src/main.js 中引入了 Element-Plus 库：
```
import ElementPlus from 'element-plus';
```

问题：Element-Plus 组件不显示

解决方法：

检查 src/main.js 是否正确引入了 Element-Plus：

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

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

确认在组件中正确使用了 Element-Plus 的组件标签：

<template>
<div>
  <el-button type="primary">点击按钮</el-button>
</div>
</template>

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

问题：Element-Plus 组件样式不正确

解决方法：

检查是否引入了正确的样式文件：
```
import 'element-plus/dist/index.css';
```
如果使用了自定义样式，确保自定义样式未覆盖默认样式。

问题：Element-Plus 组件功能不正常

解决方法：

检查是否正确配置了数据源、事件监听等：

<template>
<el-table :data="tableData" style="width: 100%">
  <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: [
      { name: '张三', address: '上海市普陀区金沙江路 1518 弄' }
    ]
  };
}
}
</script>

以上是 Element-Plus 的入门教程，希望能够帮助你快速上手并使用 Element-Plus 开发出高质量的 Web 应用。如果需要更深入的学习，建议参考 Element-Plus 的官方文档和示例代码。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

郎朗坤

手记
篇

粉丝

49

获赞与收藏

213

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30828 345

网络编程入门教程

20个小节 12721 239

Pandas 入门教程

25个小节 18601 342

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Element-plus学习入门教程

什么是Element-Plus

Element-Plus的特点和优势

安装Element-Plus

创建一个Vue项目

引入Element-Plus样式和组件

使用第一个Element-Plus组件

按钮(Button)

输入框(Input)

下拉菜单(Dropdown)

对话框(Dialog)

分页(Pagination)

使用主题定制器

自定义变量

使用CSS变量

使用Vue Router进行页面跳转

动态路由配置

路由守卫与权限控制

创建一个简单的CRUD界面

增加数据

修改数据

删除数据

集成Element-Plus到现有项目

常见问题与解决方法

问题：Element-Plus 组件样式不生效

问题：Element-Plus 组件不显示

问题：Element-Plus 组件样式不正确

问题：Element-Plus 组件功能不正常

阅读免费教程