vue3+ts项目引入ElementPlus并设置主题

1、介绍：vue3+ts项目引入ElementPlus的方式有几种，一个是完整引入，一个是官方推荐的自动导入，最后一个是手动导入

2、实操：这里展示前面两种，最后的手动导入不是很推荐，这里就不介绍了

2-1、完整引入，官方案例：element-plus-vite-starter

引入ElementPlus

$ npm install element-plus --save

main.ts引入完整版，并设置默认大小和国际语言（默认英语），并引入配置的global.scss（引用global.scss要在引入的ElementPlus样式后面，不然会被覆盖）

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import "./styles/global.scss";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router)
app.use(ElementPlus, { size: 'small', locale: zhCn })
app.mount('#app')

在global.scss里的:root里设置变量的样式就可以覆盖了

:root {
  --el-color-primary: red;
}

也可以用scss直接覆盖，这种的话就是说你用scss新写样式覆盖原本的样式合成一个新的scss文件导入main.ts里面，不用import 'element-plus/dist/index.css'了

// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

// 如果你想导入所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;

导入main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import "./styles/element/index.scss";
//import 'element-plus/dist/index.css'
import "./styles/global.scss";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router)
app.use(ElementPlus, { size: 'small', locale: zhCn })
app.mount('#app')

2-2、按需引入，官方案例：unplugin-element-plus/examples/vite

引入ElementPlus

$ npm install element-plus --save

还需要安装几个插件unplugin-vue-components，unplugin-auto-import，unocss

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

在vite.config.ts里引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Unocss from 'unocss/vite'
import {
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"],
      resolvers: [ElementPlusResolver()],
      dts: "src/autoImport.d.ts"
    }),
    Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ],
      dts: 'src/components.d.ts',
    }),
    Unocss({
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons({
          scale: 1.2,
          warn: true,
        }),
      ],
      transformers: [
        transformerDirectives(),
        transformerVariantGroup(),
      ]
    }),],
  server: {
    host: "0.0.0.0",
  },
})

新建一个scss文件配置主题

// styles/element/index.scss
$--colors: (
  "primary": (
    "base": red,
  ),
  "success": (
    "base": #21ba45,
  ),
  "warning": (
    "base": #f2711c,
  ),
  "danger": (
    "base": #db2828,
  ),
  "error": (
    "base": #db2828,
  ),
  "info": (
    "base": #42b8dd,
  ),
);


// You should use them in scss, because we calculate it by sass.
// comment next lines to use default color
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  // do not use same name, it will override.
  $colors: $--colors
);

// if you want to import all
// @use "element-plus/theme-chalk/src/index.scss" as *;

// You can comment it to hide debug info.
// @debug $--colors;

// custom dark variables
@use "./dark.scss";
// import dark theme
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

再建一个暗黑主题在index引用

// styles/element/dark.scss
$--colors: (
  "primary": (
    "base": #589ef8,
  ),
);

@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors: $--colors
);

在src路径下建立一个文件夹放vueuse这个库切换暗黑模式主题的方法

//composables/index.ts
export * from './dark'

//composables/dark.ts
import { useDark, useToggle } from '@vueuse/core'

export const isDark = useDark()
export const toggleDark = useToggle(isDark)

然后在页面引用就可以看到效果了

<script setup lang="ts">
import { toggleDark } from '../composables';
</script>

    <el-button @click="toggleDark()">切换</el-button>

按需引入还有个好玩的是自命名空间，就是可以把element里面的el改成你想自定义的名称，先引入@types/node

npm install --save @types/node

在vite.config.ts里补充以下内容，注意引入path和__dirname的时候可能会提示报错，需要重新安装依赖或者重启vsCode

...
import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig({
  resolve: {
    alias: {
      '~/': `${pathSrc}/`,
    },
  },  
  plugins: [...],
  server: {
    host: "0.0.0.0",
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
})

在// styles/element/index.scss里面补充

// we can add this to custom namespace, default is 'el'
@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
  $namespace: "wj"
);

最后去到App.vue里面套一层ConfigProvider组件，填上自定义名称，并补充上默认组件大小和语言

<script setup lang='ts'>
import { ref } from 'vue'
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const locale = ref(zhCn)
</script>

<template>
<el-config-provider namespace="wj" :locale="locale" size="small">
  <img alt='Vue logo' src='./assets/logo.png' />
  <HelloWorld msg='Hello Vue 3 + TypeScript + Vite' />
</el-config-provider>
</template>