Vue3集成Element-Plus搭建管理系统的页面框架上（小白版）

原创已于 2025-04-08 17:57:14 修改 · 1.4k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-02-21 23:05:29 首次发布

一、Idea配置vue框架

安装依赖

cd F:\vue3测试项目\代码\code2025\vue

npm i element-plus -S

卸载依赖

npm uinstall element-plus

同时node_modules文件夹内有element-plus文件，验证成功！

搭建页面内部

打开官网选择你所需要的组件代码：先继承后展示

Button 按钮 | Element Plus

在main.js内引用以下代码：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

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

示例放到Home.vue内

得到以下结果：

二、全局使用icon，注册所有图标

npm install @element-plus/icons-vue

验证是否成功：

在main.js内写下代码：

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

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

完成后大家可以在官网上找到喜欢的组件，点击一下，将代码复制到Home.vue文件内，再刷新即可。

示例0：

得到结果：

icon的常见三种方式：

1.el-icon、el-button:按钮或者图标组件里面不需要单独导入图标

2.el-input:当你在输入框组件里面使用图标，你需要单独导入图标
3.el-button:按钮或者图标组件里面不需要单独导入图标

找到：

示例1：

<div>
  <el-icon size="25" color="green"><search /></el-icon>

</div>

示例2：

<script setup>
import { Calendar, Search } from '@element-plus/icons-vue'
</script>
<el-input placeholder="请输入内容" :suffix-icon="Calendar":prefix-icon="Search"/>
注：不同版本这里有所不同，idea2021显示这样，其他版本可能是这样，显示不出来千万不要灰心，再尝试一下

示例3：

<el-button type="primary" icon="search">按钮</el-button>

主题色设置：

npm install -D sass unplugin-vue-components unplugin-auto-import

验证：

配置 index.scss 放在 src/assets/css 目录下

// 引入 Element Plus 的默认变量文件
@use "element-plus/theme-chalk/src/common/var" as *;

// 自定义颜色变量，基于 Element Plus 的默认变量进行扩展
$custom-colors: (
        "primary": ("base": #0066CC),
        "text": ("base": #B87333),
        "background": ("base": #F5F5F5),
        "success": ("base": #C23B22),
        "danger": ("base": #67C23A),
        "warning": ("base": #E6A23C),
        "error": ("base": #e26060),
        "info": ("base": #7a9fe7)
);

自己设置即可，在Home.vue文件夹中，如图

配置一下：

import AutoImport from 'unplugin-auto-import'//自动导入vue的组件
import Components from 'unplugin-vue-components/vite'//自动导入ui-组件，比如element-plus等
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' //对应组件库引入

AutoImport({
  resolvers: [ElementPlusResolver()],
}),
Components({
  resolvers: [ElementPlusResolver({importStyle:"sass"})],
}),

css:{
  preprocessorOptions:{
    scss:{
      additionalData:`@use "@/assets/css/index.scss" as *;`
    }
  }
},

第一次搞，需要下载配置一下：

npm install unplugin-auto-import --save-dev

成功：