Web / 编程开发

Element Plus 介绍

浅时光博客 · 8月29日 · 2022年 本文1115个字,预计阅读3分钟 28075次已读
文章来源(Source):浅时光博客

一、认识Element Plus


1、Element介绍

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

  • Element-UI:基于vue2版本
  • Element-Plus:基于原文链接:https://www.dqzboy.comvue3版本

2、Vue导入ElementPlus

使用ElementPlus的三种方式:

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

在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')

二、原文链接:https://www.dqzboy.comElement Plus基础组件


1、Element Plus组件介绍

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

官方网站:

使用方法:

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

2、Element Plus组件使用

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

在项目目录下新建一个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>

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


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


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

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