vue06 Element-Plus的安装和使用

最新推荐文章于 2024-07-18 23:37:19 发布
最新推荐文章于 2024-07-18 23:37:19 发布
阅读量2.4k 收藏 4
点赞数
文章标签： javascript 前端框架 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59122152/article/details/132139223
版权

Element-Plus的安装和使用

前言

这篇文章介绍了Element-Plus的安装和使用，Element-Plus的底层是基于vue的，所以需要搭配vue3来使用。

Element-Plus的安装

1.1使用包管理器下载

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

1.2 直接通过浏览器的 HTML 标签导入 Element Plus

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

2 vue项目引入Element-Plus

在vue项目中的main.js文件中引入

/* 引入Element-Plus插件 */
import ElementPlus from 'element-plus'
/* 引入Element-Plus样式 */
import 'element-plus/dist/index.css'
/* 使用Element-Plus插件 */
app.use(ElementPlus)

3、做完上述两个步骤后就可以使用Element-Plus了

（1）按钮的使用

A 基础按钮
<template>
	 <el-row class="mb-4">
		<el-button type="primary">点击</el-button>
		<el-button type="success">点击成功</el-button>
		<el-button type="info">进入</el-button>
		<el-button type="warning">等待</el-button>
		<el-button type="danger">删除</el-button>
		 </el-row>
</template>

<script>
	name:'App'
</script>

<style>
</style>

在这里插入图片描述

B 禁用按钮
<template>
	
		 
		  <el-row class="mb-4">
		     <el-button disabled>Default</el-button>
		     <el-button type="primary" disabled>Primary</el-button>
		     <el-button type="success" disabled>Success</el-button>
		     <el-button type="info" disabled>Info</el-button>
		     <el-button type="warning" disabled>Warning</el-button>
		     <el-button type="danger" disabled>Danger</el-button>
		   </el-row>
</template>

<script>
	name:'App'
</script>

<style>
</style>

在这里插入图片描述

C 链接按钮
 <div class="flex justify-space-between mb-4 flex-wrap gap-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
      >{{ button.text }}</el-button
    >
  </div>
D 图标按钮
<template>
	  <div class="flex">
	    <el-button type="primary" :icon="Edit" />
	    <el-button type="primary" :icon="Share" />
	    <el-button type="primary" :icon="Delete" />
	    <el-button type="primary" :icon="Search">Search</el-button>
	    <el-button type="primary">
	      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
	    </el-button>
	  </div>
</template>

<script setup >
import { 
	Delete,
	 Edit, 
	 Search, 
	 Share,
	  Upload } from '@element-plus/icons-vue'
</script>

<style>
</style>

在这里插入图片描述

（2）布局容器

使用规则

  • < el-container >：外层容器。 当子元素中包含 或 时，全部子元素会垂直上下排列， 否则会水平左右排列。

  • < el-header >：顶栏容器。

  • < el-aside >：侧边栏容器。

  • < el-main >：主要区域容器。

  • < el-footer >：底栏容器。
    注：以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。 此外， < el-container >的直接子元素必须是后四个组件中的一个或多个。 后四个组件的亲元素必须是一个 < el-container >

常见布局
<template>
	  <div class="common-layout">
	     <el-container>
	       <el-header class="lay01">Header</el-header>
	       <el-main class="lay02">Main</el-main>
	     </el-container>
	   </div>
</template>

<script>
</script>

<style>
	.lay01{
		background: black;
		color: white;
		text-align: center;
	}
	.lay02{
		background: skyblue;
		text-align: center;
	}
</style>

在这里插入图片描述

============================================================================

<template>
	   <div class="common-layout">
	      <el-container>
	        <el-header class="lay01">Header</el-header>
	        <el-main class="lay02">Main</el-main>
	        <el-footer class="lay03">Footer</el-footer>
	      </el-container>
	    </div>
</template>

<script>
</script>

<style>
	.lay01{
		background: black;
		color: white;
		text-align: center;
	}
	.lay02{
		background: skyblue;
		text-align: center;
	}
	.lay03{
		background: blueviolet;
		text-align: center;
	}
</style>

在这里插入图片描述

============================================================================

<template>
	   <div class="common-layout">
	      <el-container>
	        <el-header class="lay01">Header</el-header>
	        <el-container>
	          <el-aside width="200px" class="lay02">Aside</el-aside>
	          <el-main class="lay03">Main</el-main>
	        </el-container>
	      </el-container>
	    </div>
</template>

<script>
</script>

<style>
	.lay01{
		background: black;
		color: white;
		text-align: center;
	}
	.lay02{
		background: skyblue;
		text-align: center;
	}
	.lay03{
		background: blueviolet;
		text-align: center;
	}
</style>

在这里插入图片描述

============================================================================

<template>
	   <div class="common-layout">
	      <el-container>
	        <el-aside width="200px" class="lay01">Aside</el-aside>
	        <el-container>
	          <el-header class="lay02">Header</el-header>
	          <el-main class="lay03">Main</el-main>
	          <el-footer class="lay04">Footer</el-footer>
	        </el-container>
	      </el-container>
	    </div>
</template>

<script>
</script>

<style>
	.lay01{
		background: black;
		color: white;
		text-align: center;
	}
	.lay02{
		background: skyblue;
		text-align: center;
	}
	.lay03{
		background: blueviolet;
		text-align: center;
	}
	.lay04{
		background: yellowgreen;
		text-align: center;
	}
</style>

在这里插入图片描述

（3）Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

例如：

//span属性把左边分成了4等份，把中间分成了16等份，把右边分成了4等份
<template>
  <el-row>
    <el-col :span="4"><div class="grid-content ep-bg-purple" />
	<div class="lay01"><p>左边</p></div>
	</el-col>
    <el-col :span="16"><div class="grid-content ep-bg-purple-light" />
	<div class="lay02"><p>中间</p></div>
	</el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" />
	<div class="lay03"><p>右边</p></div>
	</el-col>
  </el-row>
</template>

<style >
.lay01{
	background: yellow;
	text-align: center;
}
.lay02{
	background: greenyellow;
	text-align: center;
}
.lay03{
	background: black;
	text-align: center;
	color: white;
}
</style>

在这里插入图片描述

行提供 gutter 属性来指定列之间的间距，其默认值为0。
//设置列之间的间距为20
 <el-row :gutter="20">

在这里插入图片描述

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
<el-col :span="6" :offset="6">

在这里插入图片描述

（4）响应式布局

  • xs (Extra Small) - 非常小的屏幕：这通常适用于手机或非常小的设备，例如小型智能手机。在这个屏幕尺寸下，页面布局可能需要进行特殊的调整，以适应较小的显示空间。

  • sm (Small) - 小型屏幕：这适用于较小的平板电脑和一些较旧的手机。在这个屏幕尺寸下，页面布局可能需要进行一些适配，以确保内容可以清晰地显示和使用。

  • md(Medium) - 中等尺寸屏幕：这适用于标准大小的平板电脑和较大的移动设备。在这个屏幕尺寸下，页面布局通常较为标准化，不需要过多的调整。

  • lg(Large) - 大型屏幕：这适用于较大的台式机显示器、笔记本电脑和某些大型平板电脑。在这个屏幕尺寸下，页面布局可以更加宽敞，展示更多的内容和功能。

  • xl (Extra Large) - 非常大的屏幕：这适用于大型显示屏、高分辨率的电视和投影设备。在这个屏幕尺寸下，页面布局可以更宽阔，并利用更多的显示空间来提供更丰富的体验。

<template>
  <el-row :gutter="20">
    <el-col :xs="8" :sm="10" :md="8" :lg="6" :xl="1"><div class="grid-content ep-bg-purple" />
	<div class="lay01">first</div>
	</el-col>
    <el-col :span="6" :offset="6" :xs="8" :sm="10" :md="8" :lg="3" :xl="1" >
	<div class="grid-content ep-bg-purple"/>
	<div class="lay02">second</div>
	</el-col>
  </el-row>
 
</template>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.lay01{
	background: yellow;
}
.lay02{
	background: grey;
}
</style>

在这里插入图片描述

（5）基于断点的隐藏类

Element Plus 额外提供了一系列类名，用于在某些条件下隐藏元素。 这些类名可以添加在任何 DOM 元素或自定义组件上。 如果需要，请自行引入以下文件：

import 'element-plus/theme-chalk/display.css'

类名
hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏
hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
hidden-md-only - 当视口在 md 尺寸时隐藏
hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
hidden-lg-only - 当视口在 lg 尺寸时隐藏
hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
hidden-xl-only - 当视口在 xl 尺寸时隐藏

（6）表格和分页

设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。 prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。

<template>
  <div class="example-pagination-block">
    <div class="example-demonstration">When you have few pages</div>
    <el-pagination layout="prev, pager, next" :total="50" />
  </div>
  <div class="example-pagination-block">
    <div class="example-demonstration">When you have more than 7 pages</div>
    <el-pagination layout="prev, pager, next" :total="1000" />
  </div>
</template>

<style scoped>
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
</style>

在这里插入图片描述

更多请访问：Element-Plus

总结

Element-Plus给我们提供了一些强大的组件，让我们项目开发更快速，更便捷，学会使用Element-Plus将帮助我们更好的就业。

背破包望星空
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3-Element-Plus
04-10
theme highlight channing-cyan a11y-dark ，欢迎使用、Star。 为何使用 Vite 快速的冷启动 即时的模块热更新 真正的按需编译 初始化项目 使用官网提供的命令快速创建一个 Vue3.0 + Vite2.0 的项目。 # npm 6.x npm init @vitejs/app my-vue-app --template vue # npm 7+, 需要额外的双横线： npm init @vitejs/app my-vue-app -- --template vue # yarn yarn create @vitejs/app my-vue-app --template vue 添加 Element-ui 注意：我们需要引入的是 element-plus 而不是 element-ui（element-plus 适配的是 Vue3.0）。 组件全部加
vue-element-admin中文版本
07-20
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue.js 的组件库，它的设计风格简洁明了，组件丰富，包括表格、按钮、提示、通知、布局等多种常见的 UI 元素，旨在提升开发效率并保持界面的一致性。...
element plus 安装
09-13 2108
使用element plus，需要nodejs环境，然后通过npm先安装vue3，再安装element plus
Vue(四)---引入 Element-Plus Ui
dys000000的博客
06-17 2090
创建Vue项目 发送axios请求配合ElementPlusUi完成完整的分页查询操作
element-plus的安装
weixin_49046136的博客
05-20 1496
element-plus的安装
Vue 安装 Element Plus
A____t的博客
05-05 1万+
Vue CLI 3 下使用 Element Plus ，解决 icon 图标不显示的问题，亲测有效！！！
vue-element-plus-admin:一套基于vue3，element-plus，typesScript，vue-cli4的后台集成方案
03-29
介绍是一个基于 ， ， ， 的后台解决方案，已经解决了和的写法和优点。内置了动态路由，权限验证，，典型的业务模型，丰富的功能组件，并提供了多页配置，开箱即用，可以用作项目的启动模版。它可以帮助您快速构建...
vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版
04-05
vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版。使用了最新的vue3，vite4，TypeScript等主流技术开发，开箱即用的中后台前端解决方案，
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
移动端登录界面，使用vue,element-plus
08-16
移动端登录界面
安装element-plus
xy52wiue的博客
07-01 611
笔记
Element Plus 实例详解（一）___安装设置
热门推荐
逆境清醒的博客
03-23 3万+
Element Plus是基于Vue 3，面向设计师和开发者的组件库。一、前言。二、安装方法。三、Element Plus用法。四、Element Plus 安装使用小实例
Element UI Plus的安装和使用
Aresnine的博客
02-21 2882
Element Plus 支持通过 SCSS 变量来自定义主题。你可以在项目中覆盖默认的 SCSS 变量来定制主题。
vue项目引入element-plus
JiuMeilove的博客
03-03 2082
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第三方组件库来说是一件好事，那些已经修修补补无数次，还无法彻底解决的问题，在这次面向 Vue 3.0 重构时，一次性全部解决。Element Plus 有那些升级？Element Plus 使用 Vue 3 与 TypeScript开发，提供完整的类型定义文件，使用 Composition API 简化逻辑，降低耦合。
element-plus安装
m0_62169178的博客
08-04 203
第二步：在main.js中。
element plus详细安装教程
weixin_44126032的博客
03-29 1万+
第一次安装element plus踩了很多坑 注意：element plus只适用于Vue3框架！ 如果用Vue2框架，第一步执行 $ npm install element-plus --save 好，没有报错， 继续第二部，引入 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' 终端会出现以下情况： 查看资料后发现只能用vue3框架。 步骤一： $ npm insta...
element-plus的安装使用
06-02 1414
【代码】element-plus的安装使用。
Vue 3项目安装Element-Plus
最新发布
洛*璃的博客
07-18 1324
是一个基于的现代前端UI框架，它旨在提升开发体验，并为开发者提供高效、优雅的组件。如果你正在使用进行项目开发，那么安装和集成是一个不错的选择。在本文中，博主将详细介绍如何在项目中安装。
vue 使用 element-plus
03-01
Vue是一种流行的JavaScript框架，用于构建用户界面。Element Plus是一个基于Vue的UI组件库，提供了丰富的可重用组件，可以帮助开发者快速构建美观、交互丰富的Web应用程序。 使用Element Plus可以让你更轻松地创建Vue应用程序，并且提供了一致的设计和开发体验。下面是使用Element Plus的一般步骤： 1. 安装Element Plus：你可以使用npm或yarn来安装Element Plus。在项目的根目录下运行以下命令： ``` npm install element-plus ``` 或者 ``` yarn add element-plus ``` 2. 引入Element Plus：在你的Vue项目的入口文件（通常是main.js）中，引入Element Plus的样式和组件： ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 3. 使用Element Plus组件：现在你可以在你的Vue组件中使用Element Plus提供的各种组件了。例如，在一个Vue单文件组件中使用一个按钮组件： ```html <template> <el-button type="primary">Click me!</el-button> </template> <script> export default { // 组件逻辑 } </script> ``` Element Plus提供了许多常用的UI组件，如按钮、表单、表格、弹窗等等。你可以根据自己的需求在项目中使用这些组件，以提高开发效率和用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值