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 可视化安装（建议使用）

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

vue项目管理可视化窗口

方式二：通过cnpm命令安装，但目前安装不稳定

#这里一定要用cnpm命令安装
# 进入项目文件夹，比如 E:\myweb\myapp>,这里使用--save局部安装，如果全局安装可以使用-g
cnpm install element-plus --save
# 或简写为
cnpm 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项目管理可视化窗口）

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

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

2.2 全局引入

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

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

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

<template>
	<div class="mybtn">
		<el-row class="mb-4">
			<el-button>Default</el-button>
			<el-button type="primary">Primary</el-button>
			<el-button type="success">Success</el-button>
			<el-button type="info">Info</el-button>
			<el-button type="warning">Warning</el-button>
			<el-button type="danger">Danger</el-button>
		</el-row>

		<el-row class="mb-4">
			<el-button plain>Plain</el-button>
			<el-button type="primary" plain>Primary</el-button>
			<el-button type="success" plain>Success</el-button>
			<el-button type="info" plain>Info</el-button>
			<el-button type="warning" plain>Warning</el-button>
			<el-button type="danger" plain>Danger</el-button>
		</el-row>

		<el-row class="mb-4">
			<el-button round>Round</el-button>
			<el-button type="primary" round>Primary</el-button>
			<el-button type="success" round>Success</el-button>
			<el-button type="info" round>Info</el-button>
			<el-button type="warning" round>Warning</el-button>
			<el-button type="danger" round>Danger</el-button>
		</el-row>

		<el-row>
			<el-button :icon="Search" circle />
			<el-button type="primary" :icon="Edit" circle />
			<el-button type="success" :icon="Check" circle />
			<el-button type="info" :icon="Message" circle />
			<el-button type="warning" :icon="Star" circle />
			<el-button type="danger" :icon="Delete" circle />
		</el-row>
	</div>
</template>
<script>
	export default {
		name: 'MyBtn'
	}
</script>
<style>
</style>

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

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!--使用自定义标签-->
  <MyBtn />
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
// 导入HelloWorld组件
import HelloWorld from './components/HelloWorld.vue'
// 导入组件MyBtn
import MyBtn from './components/MyBtn.vue'

export default {
  name: 'App',
  //定义自义的组件文件，并在组件模板中使用
  components: {
    HelloWorld,
	MyBtn
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>element入门</title>
		<!-- 引入ElementUI样式的兼容模式-->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<!-- 引入ElementUI组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
        <!--以下代码也可以用到vue3的组件文件中-->
		<div id="app">
			<el-container>
				<el-header>
					header
				</el-header>
				<el-container>
					<el-aside width="200px">aside</el-aside>
					<el-container>
						<el-main>main</el-main>
						<el-footer>footer</el-footer>
					</el-container>
				</el-container>
			</el-container>
		</div>
		<style>
		        .el-header, .el-footer {
		            background-color: #B3C0D1;
		            color: #333;
		            text-align: left;
		            line-height: 60px;
		        }
			    .el-aside {
		            background-color: #D3DCE6;
		            color: #333;
		            text-align: center;
		            line-height: 200px;
		        }
		        .el-main {
		            background-color: #E9EEF3;
		            color: #333;
		            text-align: center;
		            line-height: 590px;
		        }
		    </style>
	</body>
	<script>
		 new Vue({
		    el:'#app'
		  });
	</script>
</html>

3.2 实用小组件

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

1、icon小图标

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>

2、button按钮

<el-row>
  <el-button>默认按钮</el-button>
  <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>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

3、Link文字链接

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

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