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

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>

效果如下图：