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

灌篮少年 发表于 2025-3-10 18:43:08

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

目次
一、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命令操作。
https://i-blog.csdnimg.cn/direct/22512d9c60a74fc884b62f5bb032591b.png
（2）main.js文件中引入依赖。

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

[*]官网教学位置。
https://i-blog.csdnimg.cn/direct/d8972a028a6f48a69686e4ffdb5df954.png


[*]现实导入如下。
https://i-blog.csdnimg.cn/direct/5550f9888a2344f5848e64598ea02281.png
（3）main.js中导入中国语言包并配置语言环境。



[*]这样可以让作为国内的程序员（尤指本身hh..）可读性更好。
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
locale: zhCn,
})

[*]官网教学位置。
https://i-blog.csdnimg.cn/direct/063477bccc8d40009bc2d392fa27735d.png


[*]最终main.js文件导入情况如下所示。
https://i-blog.csdnimg.cn/direct/edce9a97cab64290b59764d04336a197.png


[*] 下面测试element-plus组件依赖是否可以应用了。
[*] 前往官网的组件模块去测试各种功能、配置组件等等的使用。
https://i-blog.csdnimg.cn/direct/ca36546155a74714b56c7cf8bea2ac20.png
（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>https://i-blog.csdnimg.cn/direct/71c35ed2261f4064833525375150ed79.png
<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！
https://i-blog.csdnimg.cn/direct/7685cd3a983746d488dd8b73fb3d0f7d.png
<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的组件也是支持所有事件的绑定。
https://i-blog.csdnimg.cn/direct/41e22f40b3914df6bcefca3c191b2ca3.png
<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。
https://i-blog.csdnimg.cn/direct/0f98db685eb84d2b898a3aeb9192665d.png
<4>Button API。



[*]可以继承往下检察官网提供的Button API。这里重要是关于按钮的一些属性设置。可以在原有的按钮样式上进行修改与调整。
https://i-blog.csdnimg.cn/direct/e93754741d634498bc3a483d7dd3cfc1.png


[*] 质朴按钮。(变成虚框)
<el-button type="primary">Primary</el-button>
<el-button type="primary" plain>Primary</el-button>https://i-blog.csdnimg.cn/direct/c9f151db78704305a4954c062ce983cc.png


[*] 按钮巨细—size。
<el-button type="warning">Warning</el-button>
<el-button type="warning" size="large">Warning</el-button>https://i-blog.csdnimg.cn/direct/b227950048e0472b9a63ac1b9e43e00a.png


[*] "加载中"样式按钮。
<el-button type="danger" loading>Danger</el-button>https://i-blog.csdnimg.cn/direct/818aabcff37049a482cc9603b4b219a8.png


[*] 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>https://i-blog.csdnimg.cn/direct/7dc1213b77bf426496aa01c0eac2b4f7.png
（5）element-plus组件—Icon图标。

<1>安装element-plus的Icon依赖组件。

#安装命令
npm install @element-plus/icons-vue

[*]打开IDEA终端，在项目目次下继承实行命令即可。
https://i-blog.csdnimg.cn/direct/810003a9787b441782f32cc8da9b6865.png
<2>main.js中注册所有图标。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}https://i-blog.csdnimg.cn/direct/c0d7b0e8d8a646d19bf0d20189ad126a.png
<3>常用图标(icon)的使用。



[*] "编辑"图标。
<div style="margin: 30px">
      <el-icon :size="20">
      <Edit />
      </el-icon>
</div>https://i-blog.csdnimg.cn/direct/4cde7091b4634e2eb55edd861e696954.png


[*] "阅读量"图标。
<div style="margin: 30px">
      <el-icon :size="20">
      <Edit />
      </el-icon>
      <span style="margin-left: 30px">
      <el-icon><View /></el-icon>1000+
      </span>
</div>https://i-blog.csdnimg.cn/direct/fc7fca2237d848fa84fa2a061aefa9c1.png


[*]对上面的"阅读量"图标的属性进行调整设置。（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>https://i-blog.csdnimg.cn/direct/50ba3ccf0cbc4ce6a6b115e1e62023f7.png


[*]记得使用这些图标都是需要导入的。
https://i-blog.csdnimg.cn/direct/a1d53d6b37ad4767a4e93f500532593e.png


[*] "删除"按钮。(按钮中导入图标)
<el-button type="danger" :icon="Delete" circle />https://i-blog.csdnimg.cn/direct/75f26acb05964bd08613df027ac8fbfd.png
https://i-blog.csdnimg.cn/direct/c1468e107be64ba4a358ab9717b21396.png


[*] "搜索"图标。(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'
})https://i-blog.csdnimg.cn/direct/6cd7c110128f411ca3e26a0b06835f48.png
（6）设置自定义主题。(element-plus进阶)



[*]官网具体位置。
https://i-blog.csdnimg.cn/direct/17e85a08bd5b42a089c2ce1d3e90f5a9.png
<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文件中检察所安装的插件依赖。
https://i-blog.csdnimg.cn/direct/2e6b5df7504640e7ab6f57243e548547.png
<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),
));https://i-blog.csdnimg.cn/direct/9857df6ae10e4475a5186bb45f33e595.png
<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'https://i-blog.csdnimg.cn/direct/2913fcf16f97433286c241b61692dc94.png


[*]plugins中按需引入主题配置。
// 按需定制主题配置
    ElementPlus( {
      useSource: true,
    }),
    AutoImport({
      resolvers:,
}),
    Components({
      resolvers:,
}),https://i-blog.csdnimg.cn/direct/1a8ac2b657834c049fa0c60dea45ffd5.png


[*]在resolve下面再添加一个css。导入上面创建的index.scss文件。
css: {
    preprocessorOptions: {
      scss: {
      //自动导入定制化样式文件进行样式覆盖
      additionalData: `
      @use "@/assets/index.scss" as *;`,
      }
    }
},https://i-blog.csdnimg.cn/direct/2afa79a88b174264b69f68bbb387accc.png


[*]运行dev。出现报错。经过博主分析：很大概是更高版本的element-plus版本——>适配的sass版本应该也跟着版本号提高。
https://i-blog.csdnimg.cn/direct/14e00dc1ddbc455eaf6b97a4720266d0.png


[*]当前element-plus版本2.9.6：
https://i-blog.csdnimg.cn/direct/34dc66f22626487ab312f1aa057810c2.png


[*]IDEA终端中：实行提高sass版本命令。
[*]将sass版本提拔到1.79.3再次进行尝试。
npm i sass@1.79.3https://i-blog.csdnimg.cn/direct/d686394de79a41eaad8229201e687a87.png


[*]再次启动运行。无任何报错了。
https://i-blog.csdnimg.cn/direct/0ac02a4d80af4379847737c759b00edc.png


[*]重新写div盒子和几个按钮。
https://i-blog.csdnimg.cn/direct/dd6069fed55e45629add280a082fb359.png
<4>自定义主题设置成功后——按钮颜色。



[*]可以很明显的发现了主题的颜色修改成index.scss定义的颜色深浅。
https://i-blog.csdnimg.cn/direct/25b034985562446186ac5abee8382a7a.png
https://i-blog.csdnimg.cn/direct/9dedafb4a0504486bc8977b2780b1b05.png
<5>原来默认主题——按钮颜色。

https://i-blog.csdnimg.cn/direct/201b1f037bd7459bba5ce81fb7d70204.png
https://i-blog.csdnimg.cn/direct/7685cd3a983746d488dd8b73fb3d0f7d.png

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

查看完整版本: Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入 。按钮、图