认识

准备

---

1. 安装element-plus依赖

   yarn add element-plus -S

使用

---

Vite 版

1. 自动导入配置: 通过unplugin-vue-components 和 unplugin-auto-import 来实现自动导入

   import { defineConfig } from 'vite'
   import AutoImport from 'unplugin-auto-import/vite'
   import Components from 'unplugin-vue-components/vite'
   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
   
   export default defineConfig({
       plugins: [
           AutoImport({
               resolvers: [ElementPlusResolver()],
           }),
           Components({
               resolvers: [ElementPlusResolver()],
           }),
       ],
   })

2. 自定义主题配置:

   import Path from "path";
   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import AutoImport from "unplugin-auto-import/vite";
   import Components from "unplugin-vue-components/vite";
   import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
   
   export default defineConfig({
       resolve: {
           alias: {
               "~/": `${Path.resolve(__dirname, "src")}/`,
           },
       },
       css: {
           preprocessorOptions: {
               scss: {
                   additionalData: `@use "~/styles/element.theme.scss" as *;`,
               },
           },
       },
       plugins: [
           vue(),
           AutoImport({
           resolvers: [ElementPlusResolver()],
           }),
           Components({
               extensions: ["vue"],
               include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
               resolvers: [
                   ElementPlusResolver({
                       importStyle: "sass",
                   }),
               ],
               dts: "src/components.d.ts",
           }),
       ]
   });

3. 创建element.theme.scss,内容如下:

   $--colors: (
       "primary": (
           "base": red,
       ),
       "success": (
           "base": #21ba45,
       ),
       "warning": (
           "base": #f2711c,
       ),
       "danger": (
           "base": #db2828,
       ),
       "error": (
           "base": #db2828,
       ),
       "info": (
           "base": #42b8dd,
       ),
   );
   
   
   @forward "element-plus/theme-chalk/src/common/var.scss" with (
       $colors: $--colors,
   );

4. main.scss 内容如下:

   import { createApp } from "vue";
   import App from "./App.vue";
   import "./styles/index.scss";
   import "element-plus/theme-chalk/src/message.scss";
   
   const app = createApp(App);
   app.mount("#app");

Webpack 版

1. 自动导入配置: 通过unplugin-vue-components 和 unplugin-auto-import 来实现自动导入

   const AutoImport = require('unplugin-auto-import/webpack')
   const Components = require('unplugin-vue-components/webpack')
   const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
   
   module.exports = {
       plugins: [
           AutoImport({
               resolvers: [ElementPlusResolver()],
           }),
           Components({
               resolvers: [ElementPlusResolver()],
           }),
       ],
   }