创建vue3+vite项目，使用element-plus更换组件主题颜色

最新推荐文章于 2025-07-07 14:58:29 发布

原创最新推荐文章于 2025-07-07 14:58:29 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文介绍了如何使用Vite创建一个新的Vue项目，然后安装和配置ElementPlus组件库，包括安装SCSS，自定义主题颜色，以及使用unplugin-vue-components和unplugin-auto-import插件自动导入组件。最后在vite.config.js中配置别名和预处理器选项，并在页面上应用ElementPlus组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建项目：打开cmd 输入创建命令

npm create vite vite-demo --template vue

tip：vite-demo 是文件名称

2.运行项目根据package.json中的scripts对象属性来看：

npm run dev/serve(根据package.json来输入)

3.下载element-plus组件

 npm install element-plus --save

3.1还另外需要首安装unplugin-vue-components 和 unplugin-auto-import这两款插件（自动导入）

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

4.在main.ts中完整引入

import { createApp } from 'vue'
// elem-plus组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

5.在src文件夹下新建问价 styles/element/index.scss

5.1安装scss

npm install sass -D

6.在新建的styles/elment/index.scss文件书写

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #1baeae,
    ),
    'success':(
        'base':red
    )
  ),
);

7.在配置文件vite.config.js引用

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass",
        }),
      ],
    }),
  ],

  resolve: {
    // 别名
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  
  },
  css:{
    preprocessorOptions:{
      scss:{
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      }
    }  
  }
})

8.页面上使用element-plus组件

 <el-button type="primary">Primary</el-button>
 <el-button type="success">Success</el-button>

效果如下图：