vite3中 使用element-plus及主题

// src/element-plus/index.ts
import 'element-plus/dist/index.css'
import { App } from 'vue'
import {
  // ElAlert,
  ElAside,
  // ElAutocomplete,
  ElAvatar,
  // ElBacktop,
  // ElBadge,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
//   ElButtonGroup,
  // ElCalendar,
  ElCard,
  // ElCarousel,
  // ElCarouselItem,
  // ElCascader,
  // ElCascaderPanel,
  ElCheckbox,
  ElCheckboxButton,
  ElCheckboxGroup,
  ElCol,
  // ElCollapse,
  // ElCollapseItem,
  ElCollapseTransition,
  ElColorPicker,
  ElContainer,
  ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  // ElFooter,
  ElForm,
  ElFormItem,
  ElHeader,
  ElIcon,
  ElImage,
  ElInput,
  // ElInputNumber,
  // ElLink,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElOption,
  // ElOptionGroup,
  // ElPageHeader,
  ElPagination,
  ElPopconfirm,
  // ElPopover,
  // ElPopper,
  // ElProgress,
  // ElRadio,
  // ElRadioButton,
  // ElRadioGroup,
  // ElRate,
  ElRow,
  ElScrollbar,
  ElSelect,
  // ElSlider,
  // ElStep,
  // ElSteps,
  // ElSubmenu,
  ElSwitch,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElTabs,
  ElTag,
  // ElTimePicker,
  ElTimeSelect,
  // ElTimeline,
  // ElTimelineItem,
  ElTooltip,
  ElTransfer,
  // ElTree,
  // ElUpload,
  ElInfiniteScroll,
  ElLoading,
  ElMessage,
  // ElMessageBox,
  // ElNotification,
  ElConfigProvider
} from 'element-plus'

const components = [
  // ElAlert,
  ElAside,
  // ElAutocomplete,
  ElAvatar,
  // ElBacktop,
  // ElBadge,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  // ElButtonGroup,
  // ElCalendar,
  ElCard,
  // ElCarousel,
  // ElCarouselItem,
  // ElCascader,
  // ElCascaderPanel,
  ElCheckbox,
  ElCheckboxButton,
  ElCheckboxGroup,
  ElCol,
  // ElCollapse,
  // ElCollapseItem,
  ElCollapseTransition,
  ElColorPicker,
  ElContainer,
  ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  // ElFooter,
  ElForm,
  ElFormItem,
  ElHeader,
  ElIcon,
  ElImage,
  ElInput,
  // ElInputNumber,
  // ElLink,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElOption,
  // ElOptionGroup,
  // ElPageHeader,
  ElPagination,
  ElPopconfirm,
  // ElPopover,
  // ElPopper,
  // ElProgress,
  // ElRadio,
  // ElRadioButton,
  // ElRadioGroup,
  // ElRate,
  ElRow,
  ElScrollbar,
  ElSelect,
  // ElSlider,
  // ElStep,
  // ElSteps,
  // ElSubmenu,
  ElSwitch,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElTabs,
  ElTag,
  // ElTimePicker,
  ElTimeSelect,
  // ElTimeline,
  // ElTimelineItem,
  ElTooltip,
  ElTransfer,
  // ElTree,
  // ElUpload,
  ElInfiniteScroll,
  ElLoading,
  ElMessage,
  // ElMessageBox,
  // ElNotification,
  ElConfigProvider
]
export default {
  install(vue: App) {
    components.map(item => {
      vue.use(item)
    })
  }
}

//main.ts
import element from './element-plus'
app.use(element)

二、项目及element-plus的主题配置

//src/theme/theme-variable.module.scss
// *.module.scss 格式的文件在vite中可以被js中 import使用

:root{
    --systemThemeColor: #009688 //设置一个系统主题色，后续可以修改此主题色 
     //-el-color-primary 为element-plus内部使用主题变量， 此处重置为与系统主题色一致
    --el-color-primary:var(--systemThemeColor)
    --sidebarBgColor: #fff //菜单背景色
}

//暗黑模式
.dark{
    --sidebarBgColor: #33383d //菜单背景色
}
$systemThemeColor:var(--systemThemeColor)//系统主题色
//使用:export可以在js中引用
:export{
    systemThemeColor:$systemThemeColor
}


//src/theme/mixin.scss
/**
* 溢出省略号
* @param {Number} 行数
*/
@mixin ellipsis($rowCount: 1) {
  @if $rowCount <=1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
  }
}

//src/theme/layout.scss
//系统结构布局
@use './theme-variable.module.scss' as *;
@use './mixin.scss' as *;

//src/theme/common.scss
//全局样式配置
*{
    margin: 0;
    padding: 0;
}


//main.ts //在element-plus之后引入
import './theme/layout.scss'
import './theme/common.scss'

// app.vue