Element-快速入门

news2024/12/22 9:14:51

什么是 Element

在现代前端开发中，组件化的思想日益盛行，Element组件库作为一款流行的UI组件库，特别适用于基于Vue.js的项目，它为开发者提供了丰富的组件和良好的开发体验。

想要使用Element的组件库，我们需要完成下面三步……

安装Element组件库

Element 组件库有多个版本，主要对应不同的 Vue 版本。Element UI（通常称为 Element）是基于 Vue 2.x 开发的，而 Element Plus 则是为 Vue 3.x 设计的。这意味着如果您使用的是 Vue 3，则需要选择 Element Plus，而非传统的 Element UI。

根据自己安装的vue版本安装对应的组件库……我们下载的Element组件库会自动存放到我们Vue项目的 node_modules目录下

npm install element-plus

在项目中引入 Element Plus

很多人会觉得我也不会引入啊，不知道命令啊，没关系，我也不知道，那么多命令谁记得住，我们直接去官网查看参考手册，复制命令就行……

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)这里有很多精美的图标按钮，这是vue3版本呢对应的 Element plus 组件库；

如果你是 2版本，则需要去这个Element - 网站快速成型工具找自己需要的组件代码

打开main.js 文件，复制导入包的命令

注意这里图片展示的是2 版本的对应的引入方法

由于我的是vue3版本，所以我下载的是与之对应的Element plus 版本，所以下面的引入方法稍有差异，如果是2版本的话可以根据官方文档操作

定义Element Plus 组件文件

首先我们需要自己定义一个.vue 的文件来存放我们需要的组件样例，我们以plus中的按钮为例……

复制它的按钮代码，存放在我们定义的ElementView.vue 文件中，如下：

在这个ElementView.vue 文件中，我们需要定义三对标签，

<template> </template> 用来存放html 结构标签

<script></script> 存放js代码

<style><style>存放css代码

<template>
    <div class="mb-4">
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
    </div>

    <div class="mb-4">
        <el-button plain>Plain</el-button>
        <el-button type="primary" plain>Primary</el-button>
        <el-button type="success" plain>Success</el-button>
        <el-button type="info" plain>Info</el-button>
        <el-button type="warning" plain>Warning</el-button>
        <el-button type="danger" plain>Danger</el-button>
    </div>

    <div class="mb-4">
        <el-button round>Round</el-button>
        <el-button type="primary" round>Primary</el-button>
        <el-button type="success" round>Success</el-button>
        <el-button type="info" round>Info</el-button>
        <el-button type="warning" round>Warning</el-button>
        <el-button type="danger" round>Danger</el-button>
    </div>

    <div>
        <el-button :icon="Search" circle />
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="success" :icon="Check" circle />
        <el-button type="info" :icon="Message" circle />
        <el-button type="warning" :icon="Star" circle />
        <el-button type="danger" :icon="Delete" circle />
    </div>
</template>

<script lang="ts" setup>
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue';
</script>

<style>
/* 这里可以添加样式 */
</style>

修改App.vue

我们需要在App.vue 文件中引入 Element.vue ，来进行展示页面，清除原有的所有标签，给App.vue 也保留这三个标签，

<template>
  <div>
    <element-view></element-view>
  </div>
</template>

<script setup lang="ts">
import ElementView from './views/ElementView.vue'; 
</script>

<style>

</style>