Web / 编程开发

Element Plus 介绍

温馨提示:本文最后更新于2022-08-05 22:46:42,某些文章具有时效性,若有错误或已失效,请在下方留言或问题自助查询
当前位置: 首页 » 编程开发 » Web » Element Plus 介绍
浅时光博客 · 8月29日 · 2022年 本文1115个字,预计阅读3分钟 4909次已读

一、认识Elemen文章来源(Source):https://www.dqzboy.comt Plus


1、Element介绍原文链接:https://www.dqzboy.com

Element-UI是基于vue实现的一套不依赖业务的UI组件库,提供了丰富的PC端组件,减少用户对常用组件的封装,降低了开发的难易程度。

  • Element-UI:基于vue2版本
  • Element-Plus:基于vue3版本

2、Vue导入ElementPlus

使用ElementPlus的三种方式:

  1. 在HTML中以CDN包的形式导入
  2. 下载JS文件保存到本地再导入
  3. 使用npm安装,Vue文章来源(Source):浅时光博客项目使用该方法

在vue项目main.js中引入element-plus组件以及css文件

import { createApp } from 'vue'
import App from './App.vue'
//导入element-plus组件以及css文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//将element plus引用到app实例中
const app = createApp(App)
app.use(ElementPlus)
createApp(App).mount('#app')

二、Element Plus基础组件


1、Element Plus组件介绍

什么是Element Plus组件?带有el-前缀的标签

官方网站:

使用方法:

  1. Vue导入Element Plus
  2. 在官方文档找到需要的样式组件
  3. 复制代码到对应的.vue
  4. 修改为对应的数据

2、Element Plus组件使用

这里我们测试创建使用TAG标签

Element Plus 介绍-浅时光博客

在项目目录下新建一个tag.vue文件,并将上面的源代码复制黏贴进去

<template>
  <el-tag>Tag 1</el-tag>
  <el-tag class="ml-2" type="success">Tag 2</el-tag>
  <el-tag class="ml-2" type="info">Tag 3</el-tag>
  <el-tag class="ml-2" type="warning">Tag 4</el-tag>
  <el-tag class="ml-2" type="danger">Tag 5</el-tag>
</template>

最后访问我们的项目页面可以看到下图中的效果

Element Plus 介绍-浅时光博客



关注本站官方微信公众号『精彩程序人生』

扫描左侧二维码关注我们的微信公众帐号,在微信公众帐号中回复【资料】获取IT技术文档。
关注博主不迷路~


本文作者:浅时光博客
原文链接:https://www.dqzboy.com/11349.html
版权声明:知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)协议进行许可,转载时请以超链接形式标明文章原始出处和作者信息
免责声明:本站发布的内容(图片、视频和文字)以及一切破解补丁、注册激活和软件解密分析文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。访问和下载本站内容,说明您已同意上述条款!


相关文章
暂无相关文章!
0 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!

    本站已稳定运行: | 耗时 0.217 秒 | 查询 63 次 | 内存 10.73 MB