当前位置：首页 > article >正文

Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入。按钮、图标组件。自定义主题的实现)(超详细)）(4)

article 2025/3/10 23:35:59

目录

一、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>
通过绑定属性的方式——把按钮中的文本颜色变成对应样式设置的red。

<4>Button API。

可以继续往下查看官网提供的Button API。这里主要是关于按钮的一些属性设置。可以在原有的按钮样式上进行修改与调整。

朴素按钮。(变成虚框)
<el-button type="primary">Primary</el-button>
<el-button type="primary" plain>Primary</el-button>
按钮大小—size。
<el-button type="warning">Warning</el-button>
<el-button type="warning" size="large">Warning</el-button>
"加载中"样式按钮。
<el-button type="danger" loading>Danger</el-button>
color。(设置按钮背景颜色)

style="color:xxx"。(设置按钮文本颜色)
<el-button type="info">Info</el-button>
<el-button type="info" color="yellow">Info</el-button>
<el-button type="info" style="color:red;">Info</el-button>
（5）element-plus组件—Icon图标。

<1>安装element-plus的Icon依赖组件。
#安装命令
npm install @element-plus/icons-vue
打开IDEA终端，在项目目录下继续执行命令即可。

<2>main.js中注册所有图标。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
<3>常用图标(icon)的使用。

"编辑"图标。
<div style="margin: 30px">
      <el-icon :size="20">
        <Edit />
      </el-icon>
</div>
"阅读量"图标。
<div style="margin: 30px">
      <el-icon :size="20">
        <Edit />
      </el-icon>
      <span style="margin-left: 30px">
        <el-icon><View /></el-icon>1000+
      </span>
</div>
对上面的"阅读量"图标的属性进行调整设置。（top属性巧妙设置！）
<span style="margin-left: 30px">
        <el-icon style="margin-right: 10px"><View /></el-icon>
        <el-icon size="20" style="top: 4px" ><View /></el-icon>1000+
</span>
记得使用这些图标都是需要导入的。

"删除"按钮。(按钮中导入图标)
<el-button type="danger" :icon="Delete" circle />
"搜索"图标。(input输入框中)
<el-input
            v-model="data.str"
            style="width: 240px"
            placeholder="Type something"
            :prefix-icon="Search"
/>
import {Delete, Edit, Search, View} from "@element-plus/icons-vue";
//第二种定义数据的方式
const data = reactive({
  css01:{
    color : 'red',
  },
  str:'www.baidu.com'
})
（6）设置自定义主题。(element-plus进阶)

官网具体位置。

<1>执行命令，安装指定插件依赖。
#依次执行以下命令安装依赖
npm i sass@1.71.1 -D

npm i unplugin-auto-import -D

npm i unplugin-element-plus -D

npm i unplugin-vue-components -D
依次执行完命令后。可以在package.json文件中查看所安装的插件依赖。

<2>assets目录下新建index.scss文件。(设置主题色)
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
  "primary":("base":#0b5596),
  "success": ("base": #3aaa14),
  "warning": ("base": #e4da17),
  "danger": ("base": #f11d1d),
  "info": ("base": #8a47dc),
));
<3>配置vite.config.js文件中引用主题配置。

导入上面安装的四个插件依赖。
import AutoImport from'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver }from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
plugins中按需引入主题配置。
// 按需定制主题配置
    ElementPlus( {
      useSource: true,
    }),
    AutoImport(  {
      resolvers:[ElementPlusResolver( { importStyle: 'sass' })],
}),
    Components(  {
      resolvers:[ElementPlusResolver( { importStyle: 'sass' })],
}),
在resolve下面再添加一个css。导入上面创建的index.scss文件。
css: {
    preprocessorOptions: {
      scss: {
        //自动导入定制化样式文件进行样式覆盖
        additionalData: `
        @use "@/assets/index.scss" as *;`,
      }
    }
  },
运行dev。出现报错。经过博主分析：很可能是更高版本的element-plus版本——>适配的sass版本应该也跟着版本号提高。

当前element-plus版本2.9.6：

IDEA终端中：执行提高sass版本命令。
将sass版本提升到1.79.3再次进行尝试。
npm i sass@1.79.3
再次启动运行。无任何报错了。

重新写div盒子和几个按钮。

<4>自定义主题设置成功后——按钮颜色。

可以很明显的发现了主题的颜色修改成index.scss定义的颜色深浅。

<5>原本默认主题——按钮颜色。