日报2025318

今日学习Element-plus组件
首先供上我们的element plus 行为指导库
https://element-plus.org/zh-CN
el-button

  <div>
    <el-button color="rgb(247, 137.4, 137.4)" plain style="color: white"  > Komeigi Satori</el-button>
  </div>

icon

  <div style="color: plum">
    <el-icon size="20" style="top: 2px"><View /></el-icon>
    <el-button icon="delete"></el-button>
  </div>

自定义主题
首先下载四个插件

 npm i sass@1.71.1
 npm i unplugin-auto-import -D
 npm i unplugin-element-plus -D
 npm i unplugin-vue-components -D

然后再assets中新建index.scss

/* just override what you need */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: (
    'primary': ('base': blue),
    "success":('base':green),
    "warning":('base': yellow),
    "danger":('base':red),
    "info":('base',purple),
  )
);

之后在vite.congig.js 中配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

import AutoImprot from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // use unplugin-vue-components
    // Components({
    //   resolvers: [
    //     ElementPlusResolver({
    //       importStyle: "sass",
    //       // directives: true,
    //       // version: "2.1.5",
    //     }),
    //   ],
    // }),
    // or use unplugin-element-plus
    ElementPlus({
      useSource: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
})