Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入。按钮、图 ...

灌篮少年 · 2025-3-10 18:43:08

目次
  一、Vue3工程环境准备、项目底子脚手架搭建详细教程。(博客链接)
  二、Vue3集成Element-Plus。(实操)
  （1）项目目次下安装Element-Plus组件依赖。
  （2）main.js文件中引入依赖。
  （3）main.js中导入中国语言包并配置语言环境。
  （4）element-plus组件—按钮。
  <1>根本按钮样式渲染。
  <2>按钮添加事件绑定。(v-on

  <3>按钮绑定样式属性。(v-bind)
  <4>Button API。
  质朴按钮。(变成虚框)
  按钮巨细—size。
  "加载中"样式按钮。
  color。(设置按钮背景颜色)
  style="color:xxx"。(设置按钮文本颜色)
  （5）element-plus组件—Icon图标。
  <1>安装element-plus的Icon依赖组件。
  <2>main.js中注册所有图标。
  <3>常用图标(icon)的使用。
  "编辑"图标。
  "阅读量"图标。
  "删除"按钮。(按钮中导入图标)
  "搜索"图标。(input输入框中)
  （6）设置自定义主题。(element-plus进阶)
  <1>实行命令，安装指定插件依赖。
  <2>assets目次下新建index.scss文件。(设置主题色)
  <3>配置vite.config.js文件中引用主题配置。
  <4>自定义主题设置成功后——按钮颜色。
  <5>原来默认主题——按钮颜色。

一、Vue3工程环境准备、项目底子脚手架搭建详细教程。(博客链接)

Vue3实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)-CSDN博客
Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)-CSDN博客
Vue3实战学习（Vue3的底子语法学习与使用(超详细)）(3)-CSDN博客

二、Vue3集成Element-Plus。(实操)

element-plus（国内镜像访问网址）：A Vue 3 UI Framework | Element Plus

（1）项目目次下安装Element-Plus组件依赖。

命令如下。

#安装Element-Plus组件依赖
npm install element-plus -s

复制代码

打开IDEA项目标终端。就需要完成下面两个操作。
1、cd 项目本身的目次。
2、实行npm命令操作。

（2）main.js文件中引入依赖。

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

复制代码

官网教学位置。

现实导入如下。

（3）main.js中导入中国语言包并配置语言环境。

这样可以让作为国内的程序员（尤指本身hh..）可读性更好。

import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
locale: zhCn,
})

复制代码

官网教学位置。

最终main.js文件导入情况如下所示。

下面测试element-plus组件依赖是否可以应用了。
前往官网的组件模块去测试各种功能、配置组件等等的使用。

（4）element-plus组件—按钮。

<1>根本按钮样式渲染。

<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>

复制代码

<template>
<div>
<div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 30px" >
欢迎来到hyl的第一个Vue3项目主页！加油学习吧！
</div>
<div>
<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>
</div>
</div>
</template>
<script setup>
import {reactive, ref} from "vue";
//第二种定义数据的方式
const data = reactive({
})
</script>

复制代码

能看到页面成功渲染就证明已经成功实现了Vue3集成element-plus！

<2>按钮添加事件绑定。(v-on

使用"v-on:"绑定按钮的鼠标点击事件。

<template>
<div>
<div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 30px" >
欢迎来到hyl的第一个Vue3项目主页！加油学习吧！
</div>
<div>
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button v-on:click="clickSuccess" type="success">点我好运+1</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</div>
</div>
</template>
<script setup>
import {reactive, ref} from "vue";
//第二种定义数据的方式
const data = reactive({
})
const clickSuccess = () =>{
alert("你使用的是：element-plus组件！你的好运+1")
}
</script>

复制代码

页面成功弹出提示。证明element-plus的组件也是支持所有事件的绑定。

<3>按钮绑定样式属性。(v-bind)

<template>
<div>
<div style="background-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 30px" >
欢迎来到hyl的第一个Vue3项目主页！加油学习吧！
</div>
<div>
<el-button v-bind:style="data.css01">Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button v-on:click="clickSuccess" type="success">点我好运+1</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</div>
</div>
</template>
<script setup>
import {reactive, ref} from "vue";
//第二种定义数据的方式
const data = reactive({
css01:{
color : 'red',
}
})
const clickSuccess = () =>{
alert("你使用的是：element-plus组件！你的好运+1")
}
</script>