vue3 接入 Element Plus

news2024/11/18 7:51:16

vue3 接入 Element Plus

vue3 发布已经很久了，官方也已经发布公告，自2023年12月31日起停止对 vue2 版本的维护更新，因此，vue3 正式登上了历史的舞台。组件库一直是前端开发的利器，减少了开发者开发复杂度，提高开发效率，在 vue2 中，最常使用的是 element-ui 组件库，在 vue3 发布之后，element-ui 也推出了针对于 vue3 版本的组件库 Element Plus，今天就说一下怎么在 vue3 项目里面接入使用 Element Plus，其实很简单。

Element Plus 简介

Element Plus是一套为开发者、设计师和产品经理准备的基于Vue 3.0的桌面端组件库。其主要特性和概念包括：

反馈：通过界面样式和交互动效让用户清晰地感知自己的操作。当用户进行操作后，页面元素的变化会清晰地展现当前状态。
效率：设计简洁直观的操作流程，使语言表达清晰且表意明确，帮助用户快速理解进而作出决策。此外，界面简单直白，减少用户记忆负担。
可控：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策。用户可以自由地进行操作，包括撤销、回退和终止当前操作等。

在安装和使用Element Plus时，需要注意以下几点：

环境支持：Element Plus可以在支持ES2018和ResizeObserver的浏览器上运行。如果需要支持旧版本的浏览器，可能需要自行添加Babel和相应的Polyfill。
安装方式：可以使用包管理器（如NPM、Yarn或pnpm）安装Element Plus，也可以选择通过浏览器的HTML标签直接引入。
与Element-Ui相比，Element-Plus主要区别在于其基于Vue3.0，并且支持手机版。在使用Element-Plus中的组件时，部分属性在赋值时需要采用动态绑定的形式才生效。

Element Plus 资料

Element Plus 官网：https://element-plus.org/zh-CN/#/zh-CN
Element Plus 指南：https://element-plus.org/zh-CN/guide/design.html
Element Plus 组件：https://element-plus.org/zh-CN/component/button.html

在这里插入图片描述

Element Plus 环境支持

Element Plus 可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。

在这里插入图片描述

Element Plus 下载安装

本博文使用 npm 进行 element plus 组件库的安装。

只需要一行命令：

npm install element-plus --save

等待命令执行完成即可。如果网络不好，可以采用 cnpm 的方式进行安装。

在这里插入图片描述

命令执行完成，我们可以看到，依赖里面已经加上了组件库：

在这里插入图片描述

同时，在 node_modules 文件夹下面，element-plus 依赖包也已经下载下来了：

在这里插入图片描述

Element Plus 完整引入

下载安装完成之后，我们只需要简单的引入一下就可以使用组件库了。

首先，在 main.ts 里面，通过命令的方式引入组件库：

import { createApp } from 'vue'

// 导入 ElementPlus 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)
// 挂载 ElementPlus
app.use(ElementPlus)
app.mount('#app')

OK，上面内容配置完成之后，就可以使用 Element Plus 组件库了。

Element Plus 使用

上面步骤我们已经下载安装并且到入 Element Plus 了，然后结合官网提供的组件信息，我们就可以在项目中使用了。

Element Plus组件官网：https://element-plus.org/zh-CN/component/button.html

按钮组件

比如说我们在项目中使用一下按钮组件：

<template>
  <el-button>默认按钮</el-button>
  <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>
<script setup lang="ts">
</script>
<style scoped></style>

看一下效果：

在这里插入图片描述

可以正常使用，没有任何问题。

下拉组件

再比如说下拉组件：

<template>
  <div class="ed-btn">
    <p>下拉组件</p>
    <el-select v-model="value" class="m-2" placeholder="请选择喜欢的球类" size="large">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref('') // 创建 value 变量
const options = [  // 创建下拉选项
  {
    value: '1',
    label: '篮球',
  },
  {
    value: '2',
    label: '足球',
  },
  {
    value: '3',
    label: '乒乓球',
  },
  {
    value: '4',
    label: '羽毛球',
  },
  {
    value: '5',
    label: '排球',
  },
]
</script>
<style scoped>
.ed-btn {
  padding: 15px;
}

.ed-btn p {
  border-left: 5px solid cadetblue;
  padding-left: 5px;
  margin: 10px;
  font-size: 20px;
  font-weight: 550;
  color: cadetblue;
  margin-bottom: 20px;
  line-height: 20px;
}
</style>