一、认识Element Plus
1、Element介绍
Element-UI是基于vue实现的一套不依赖业务的UI组件库,提供了丰富的PC端组件,减少用户对
Element-UI
:基于vue2版本Element-Plus
:基于原文链接:https://www.dqzboy.com vue3版本
2、Vue导入ElementPlus
使用ElementPlus的三种方式:
- 在HTML中以CDN包的形式导入
- 下
文章来源(Source):浅时光博客 载JS文件保存到本地再导入 - 使用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.com Element Plus基础组件
1、Element Plus组件介绍
什么是Element Plus组件?带有el-
前缀的标签
官方网站:
- Element Plus:https://element-plus.gitee.io/zh-CN/
- Element 组件:https://element-plus.gitee.io/zh-CN/component/button.html
使用方法:
- Vue导入Element Plus
- 在官方文档找到需要的样式组件
- 复制代码到对应的
.vue
中 - 修改为对应的数据
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>
最后访问我们的项目页面可以看到下图中的效果
必须 注册 为本站用户, 登录 后才可以发表评论!