2025-04-08

Element-Plus

1.Element-Plus简介

Element-Plus:Element-plus是一套为构建基于Vue3的组件库而设计的UI组件库(UI Kit)。它为开发者提供了一套丰富的UI组件和扩展功能，例如表格、表单、按钮、导航、通知等，让开发者能够快速构建高质量的Web应用。

2.Vue3集成Element-Plus

2.1 安装依赖

安装依赖指令：

1	npm i element-plus -S

安装位置：

安装之后：

2.2 main.js导包

3.Button按钮

以Button按钮为例：

Home.vue代码中：

4.Icon图标

4.1 安装依赖

安装依赖指令：

1	npm install @element-plus/icons-vue

安装位置：

4.2 main.js导包

4.3 具体使用

5.Element-Plus设置自定义主题色

5.1 安装依赖

安装依赖指令：

npm i sass@1.71.1 -D    【我的后面出现报错，更新到了1.86.3】--使用指令npm install sass@latest --save-dev
npm i unplugin-auto-import -D
npm i unplugin-element-plus -D
npm i unplugin-vue-components -D

安装位置：

安装之后：在总项目的package.json查看

5.2 创建index.scss文件

@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors:(
  "primary": ("base": #0742b1),
  "success": ("base": #2b8f01),
  "warining": ("base": #ffad00),
  "danger": ("base": #d50707),
  "info": ("base": #74717f),
));

在src-assets文件下创建index.scss文件：

5.3 全局vite.config.js引入

修改三处位置：

具体代码：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
//更改主题色-添加内容【引入index.scss内容】
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import ElmentPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    //更改主题色-添加内容
    ElmentPlus({
      useSource: true,
    }),
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: 'sass'})],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass'})],
    }),
  ],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  //更改主题色-添加内容
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @use "@/assets/index.scss" as *;   //注意是Esc按键下的``符号!!!
        `,
      }
    }
  },

})