【Vue3+Element Plus+Vite】按需导入Element Plus组件并配置全局样式文件

需求

1. 按需导入Element Plus组件并修改主题色

2. 全局导入变量文件 variable.scss

3. 实现PC和移动端响应式样式配置

实现

1. 创建全局变量文件 src/styles/variable.scss

/* 基础CSS变量定义 */
:root {
  /* 移动端适配 */
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);

  --sidebar-width: 48px;
  --navbar-height: 72px;

  /* 字体变量 */
  --font-family:
    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-size-base: 14px;

  /* 边框变量 */
  --border-radius: 4px;
  --border-color: #e6e4ee;

  /* 文字变量 */
  --Grey-950: #1b192a; // 标题色
  --Grey-700: #6e6b8b; // 副标题色
  --Grey-400: #c3c0d0; // 页脚
  --Grey-300: #d8d6e2; // 边框色
  --Grey-100: #f2f1f6; // 侧边栏按钮高亮色
}

/* 响应式断点 */
$breakpoint-sm: 576px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 992px !default;
$breakpoint-xl: 1200px !default;
$breakpoint-xxl: 1600px !default;

/* 媒体查询混合宏 */
@mixin respond-to($breakpoint) {
  @if $breakpoint == sm {
    @media (min-width: $breakpoint-sm) {
      @content;
    }
  } @else if $breakpoint == md {
    @media (min-width: $breakpoint-md) {
      @content;
    }
  } @else if $breakpoint == lg {
    @media (min-width: $breakpoint-lg) {
      @content;
    }
  } @else if $breakpoint == xl {
    @media (min-width: $breakpoint-xl) {
      @content;
    }
  } @else if $breakpoint == xxl {
    @media (min-width: $breakpoint-xxl) {
      @content;
    }
  } @else if $breakpoint == max-sm {
    @media (max-width: ($breakpoint-sm - 1)) {
      @content;
    }
  } @else if $breakpoint == max-md {
    @media (max-width: ($breakpoint-md - 1)) {
      @content;
    }
  } @else if $breakpoint == max-lg {
    @media (max-width: ($breakpoint-lg - 1)) {
      @content;
    }
  } @else if $breakpoint == max-xl {
    @media (max-width: ($breakpoint-xl - 1)) {
      @content;
    }
  } @else if $breakpoint == max-xxl {
    @media (max-width: ($breakpoint-xxl - 1)) {
      @content;
    }
  }
}

2. 安装 Element Plus

npm install element-plus

3. 按需导入组件（自动导入）并导入变量文件

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

vite.config.ts 文件中配置如下代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
      	 // 全局导入变量
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  }
})

4. 创建主题色配置文件 src/styles/element/index.scss

// Element Plus CSS 变量覆盖
:root {
  // 主题色
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  
  // 成功色
  --el-color-success: #67c23a;
  // 警告色
  --el-color-warning: #e6a23c;
  // 危险色
  --el-color-danger: #f56c6c;
  // 信息色
  --el-color-info: #909399;
  
  // 其他变量
  --el-font-size-base: 14px;
  --el-border-radius-base: 4px;
}

// 暗黑模式主题
.dark {
  --el-color-primary: #409eff;
  // 其他暗色模式变量...
}

5. 修改全局样式文件 src/styles/global.scss

@use './element/index.scss'; // 引入 Element 主题配置

// 设备显示控制
.pc-only {
  display: block !important;
}

.h5-only {
  display: none !important;
}

// 移动端适配
@include respond-to(max-md) {
  .pc-only {
    display: none !important;
  }
  
  .h5-only {
    display: block !important;
  }
}

6. 在 main.ts 中引入

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
引入全局样式文件
import './styles/global.scss'


// 按需导入后，不需要在这里导入 Element Plus
const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')