Vue 2 Element-Plus

最新推荐文章于 2025-03-01 21:08:21 发布

灰乌鸦乌卡

最新推荐文章于 2025-03-01 21:08:21 发布

阅读量1k

点赞数 10

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46808948/article/details/145132967

版权

前端专栏收录该内容

9 篇文章

订阅专栏

Element-Plus 组件基本使用，vue项目引入 Element-Plus，主题色修改实现快速开发

文章目录

前言

Element-Plus 简单快速实现页面官网地址

一、element-plus组件

Element-Plus是一套UI代码，通过引入该组件可以在vue页面中直接引用其中对应功能。如icon图标，下拉框，文本框，单选/多选框，图片显示，轮播图，时间日期，数据表格，分页等

二、使用步骤

1.引入组件

首先进入项目文件路径

我的vue项目名为 vue-jdzz ，进入该文件路径后直接执行安装命令：

npm i element-plus -S

安装完成后，在项目中的node modules路径下会出现 element-plus包，如图：

在main.js中引入相关element-plus包快速开始，代码如下（官网快速开始地址）：

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

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

在自己的项目中，需要再引入中文相关库，代码如下：

main.js

import './assets/main.css'

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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/global.css'
import {zhCn} from "element-plus/es/locale/index";
const app = createApp(App)


app.use(router)
app.use(ElementPlus,{
    local:zhCn,
})
app.mount('#app')

2.组件介绍

打开官网首页-->组件地址，如图，复制以下代码即可直接使用

代码如下（示例）：

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

效果如图：

组件-icon使用

官网写：你需要全局注册组件，才能够直接在项目里使用。

安装组件在项目目录（vue-jdzz）下执行命令安装icons ：

npm install @element-plus/icons-vue

在main.js 中引入 icons；通过循环将icons注入到项目中

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

在项目页面中复制相关代码即可实现对应icon

<div>
   <el-icon :size="20">
      <Edit />
    </el-icon>
    <el-icon color="#409efc" class="no-inherit">
      <Share />
    </el-icon>
    <el-icon>
      <Delete />
    </el-icon>
    <el-icon class="is-loading">
      <Loading />
    </el-icon>
    <el-button type="primary">
      <el-icon style="vertical-align: middle">
        <Search />
      </el-icon>
      <span style="vertical-align: middle"> Search </span>
    </el-button>
  </div>

效果如图：

使用icons组件引入按钮使用相关icon 除了直接复制按钮代码，还需要再单页中引入相关依赖

...
<el-button type="danger" :icon="Delete" circle />
....
<script setup>

import {Delete} from '@element-plus/icons-vue'
...

3.element-plus 其他

下拉框，文本框，单选/多选框，图片显示，轮播图，时间日期，数据表格，分页用法参考官网。