devbox
小舞很执着
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3与Element-plus整合及项目实战_vue3 element plus

作者：小舞很执着 | 2024-08-12 08:21:00

赞

踩

vue3 element plus

内容导读

1. Element-plus的概述
2. vue3与Element-plus整合
3. Element-plus基本应用

一、Element-plus概述

1. Element-plus简介

是ElementUI的升级版，是一套基于vue2与vue3的桌面端组件库，它提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

官方中文站点：一个 Vue 3 UI 框架 | Element Plus

2. 安装

注意：确保已安装好node.js-v21.7及以上版本，同时安装好了vue与vue-cli，并通过vue脚手架方式创建好前端vue3项目，比如myapp

方式一：vue ui 可视化安装（如果vue未安装请使用方式二）

windows命令行窗口输入vue  ui 打开可视化窗口

vue项目管理可视化窗口

方式二：通过npm命令安装（如果cnpm安装好，也可使用此命令）

#这里一定要用cnpm命令安装
# 进入项目文件夹，比如 E:\myweb\myapp>,这里使用--save局部安装，如果全局安装可以使用-g
npm  install  element-plus  --save

# 或 cnpm  install  element-plus  --save
# 或简写为
npm  i   element-plus  -S（大写）

# 项目中全局引入element-plus,详细整合请参考vue与element-plus整合
#在main.js 中全局注册，这种方式引入后，在全局中使用都不需要import就可以直接使用
import App from './App.vue';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)

安装依赖： 执行cnpm install 命令安装依赖

二、vue3与Element-plus整合

2.1 安装环境

1、首先，确保已安装好node.js与npm、最新的vue3与对应的vue-cli

vue    -V     #查看vue-cli的版本，验证是否已安装

npm install -g @vue/cli   #如果未安装vue3则执行此命令

2、安装element-plus

方式一：通过命令 vue  ui 可视化安装，如果之前已通过此方式安装过了，则跳过

按界面提示安装element-plus依赖（参考上边vue项目管理可视化窗口）

方式二：用npm命令安装，见上。目前不稳定，建议用方式一

npm   install   element-plus   --save  #如果之前已安装过，此处可以跳过

2.2 全局引入

1、在main.js主文件中引入以下内容

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import ElementPlus from 'element-plus'
  4. import 'element-plus/dist/index.css'
  5. const app = createApp(App)
  6. //全局绑定到vue3实例对象上
  7. app.use(ElementPlus);
  8. //还可以全局绑定更多的工具
  9. app.mount('#app');

2、在组件文件MyBtn.vue文件使用element-plus的按钮组件

  1. <template>
  2. 	<div class="mybtn">
  3. 		<el-row class="mb-4">
  4. 			<el-button>Default</el-button>
  5. 			<el-button type="primary">Primary</el-button>
  6. 			<el-button type="success">Success</el-button>
  7. 			<el-button type="info">Info</el-button>
  8. 			<el-button type="warning">Warning</el-button>
  9. 			<el-button type="danger">Danger</el-button>
  10. 		</el-row>
  11.  
  12. 		<el-row class="mb-4">
  13. 			<el-button plain>Plain</el-button>
  14. 			<el-button type="primary" plain>Primary</el-button>
  15. 			<el-button type="success" plain>Success</el-button>
  16. 			<el-button type="info" plain>Info</el-button>
  17. 			<el-button type="warning" plain>Warning</el-button>
  18. 			<el-button type="danger" plain>Danger</el-button>
  19. 		</el-row>
  20.  
  21. 		<el-row class="mb-4">
  22. 			<el-button round>Round</el-button>
  23. 			<el-button type="primary" round>Primary</el-button>
  24. 			<el-button type="success" round>Success</el-button>
  25. 			<el-button type="info" round>Info</el-button>
  26. 			<el-button type="warning" round>Warning</el-button>
  27. 			<el-button type="danger" round>Danger</el-button>
  28. 		</el-row>
  29.  
  30. 		<el-row>
  31. 			<el-button :icon="Search" circle />
  32. 			<el-button type="primary" :icon="Edit" circle />
  33. 			<el-button type="success" :icon="Check" circle />
  34. 			<el-button type="info" :icon="Message" circle />
  35. 			<el-button type="warning" :icon="Star" circle />
  36. 			<el-button type="danger" :icon="Delete" circle />
  37. 		</el-row>
  38. 	</div>
  39. </template>
  40. <script>
  41. 	export default {
  42. 		name: 'MyBtn'
  43. 	}
  44. </script>
  45. <style>
  46. </style>

3、在顶层组件文件App.vue中使用其它组件标签

  1. <template>
  2.   <img alt="Vue logo" src="./assets/logo.png">
  3.   <!--使用自定义标签-->
  4.   <MyBtn />
  5.   <HelloWorld msg="Welcome to Your Vue.js App"/>
  6. </template>
  7.  
  8. <script>
  9. // 导入HelloWorld组件
  10. import HelloWorld from './components/HelloWorld.vue'
  11. // 导入组件MyBtn
  12. import MyBtn from './components/MyBtn.vue'
  13.  
  14. export default {
  15.   name: 'App',
  16.   //定义自义的组件文件，并在组件模板中使用
  17.   components: {
  18.     HelloWorld,
  19. 	MyBtn
  20.   }
  21. }
  22. </script>
  23.  
  24. <style>
  25. #app {
  26.   font-family: Avenir, Helvetica, Arial, sans-serif;
  27.   -webkit-font-smoothing: antialiased;
  28.   -moz-osx-font-smoothing: grayscale;
  29.   text-align: center;
  30.   color: #2c3e50;
  31.   margin-top: 60px;
  32. }
  33. </style>

2.3 部署运行

 命令窗口方式切换到项目文件夹，输入：cnpm run serve 运行项目，效果如图所示：

三、Element-plus基本应用

3.1 Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列
<el-header>：顶栏容器
<el-aside>：侧边栏容器
<el-main>：主要区域容器
<el-footer>：底栏容器

案例解析： 整个蓝色方框为一个container，红色方框为一个container，黄色方框为一个container

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>element入门</title>
  6. 		<!-- 引入ElementUI样式的兼容模式-->
  7. 		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  8. 		<script src="https://unpkg.com/vue/dist/vue.js"></script>
  9. 		<!-- 引入ElementUI组件库 -->
  10. 		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  11. 	</head>
  12. 	<body>
  13.         <!--以下代码也可以用到vue3的组件文件中-->
  14. 		<div id="app">
  15. 			<el-container>
  16. 				<el-header>
  17. 					header
  18. 				</el-header>
  19. 				<el-container>
  20. 					<el-aside width="200px">aside</el-aside>
  21. 					<el-container>
  22. 						<el-main>main</el-main>
  23. 						<el-footer>footer</el-footer>
  24. 					</el-container>
  25. 				</el-container>
  26. 			</el-container>
  27. 		</div>
  28. 		<style>
  29. 		        .el-header, .el-footer {
  30. 		            background-color: #B3C0D1;
  31. 		            color: #333;
  32. 		            text-align: left;
  33. 		            line-height: 60px;
  34. 		        }
  35. 			    .el-aside {
  36. 		            background-color: #D3DCE6;
  37. 		            color: #333;
  38. 		            text-align: center;
  39. 		            line-height: 200px;
  40. 		        }
  41. 		        .el-main {
  42. 		            background-color: #E9EEF3;
  43. 		            color: #333;
  44. 		            text-align: center;
  45. 		            line-height: 590px;
  46. 		        }
  47. 		    </style>
  48. 	</body>
  49. 	<script>
  50. 		 new Vue({
  51. 		    el:'#app'
  52. 		  });
  53. 	</script>
  54. </html>

3.2 实用小组件

组件文件中要先引入.css、element-plus依赖 

1、icon小图标

  1. <i class="el-icon-edit"></i>
  2. <i class="el-icon-share"></i>
  3. <i class="el-icon-delete"></i>
  4. <el-button type="primary" icon="el-icon-search">搜索</el-button>

2、button按钮

  1. <el-row>
  2.   <el-button>默认按钮</el-button>
  3.   <el-button type="primary">主要按钮</el-button>
  4.   <el-button type="success">成功按钮</el-button>
  5.   <el-button type="info">信息按钮</el-button>
  6.   <el-button type="warning">警告按钮</el-button>
  7.   <el-button type="danger">危险按钮</el-button>
  8. </el-row>
  9.  
  10. <el-row>
  11.   <el-button plain>朴素按钮</el-button>
  12.   <el-button type="primary" plain>主要按钮</el-button>
  13.   <el-button type="success" plain>成功按钮</el-button>
  14.   <el-button type="info" plain>信息按钮</el-button>
  15.   <el-button type="warning" plain>警告按钮</el-button>
  16.   <el-button type="danger" plain>危险按钮</el-button>
  17. </el-row>
  18.  
  19. <el-row>
  20.   <el-button round>圆角按钮</el-button>
  21.   <el-button type="primary" round>主要按钮</el-button>
  22.   <el-button type="success" round>成功按钮</el-button>
  23.   <el-button type="info" round>信息按钮</el-button>
  24.   <el-button type="warning" round>警告按钮</el-button>
  25.   <el-button type="danger" round>危险按钮</el-button>
  26. </el-row>
  27.  
  28. <el-row>
  29.   <el-button icon="el-icon-search" circle></el-button>
  30.   <el-button type="primary" icon="el-icon-edit" circle></el-button>
  31.   <el-button type="success" icon="el-icon-check" circle></el-button>
  32.   <el-button type="info" icon="el-icon-message" circle></el-button>
  33.   <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  34.   <el-button type="danger" icon="el-icon-delete" circle></el-button>
  35. </el-row>

3、Link文字链接

  1. <div>
  2.   <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  3.   <el-link type="primary">主要链接</el-link>
  4.   <el-link type="success">成功链接</el-link>
  5.   <el-link type="warning">警告链接</el-link>
  6.   <el-link type="danger">危险链接</el-link>
  7.   <el-link type="info">信息链接</el-link>
  8. </div>

说明： 更多小组件的应用请参考element-puls官方网站。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/968572
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号