vue3项目中 全局引入element和自定义主题；按需引入element和自定义主题

首先安装

npm install -D sass
npm install element-plus --save

1. 在项目中全局引入element-plus

   1. 在main.js文件中引入

      import ElementPlus from 'element-plus'
      import 'element-plus/dist/index.css'
      app.use(ElementPlus)
      

   2. 自定义主题

      1. 在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 *;
         

      2. 将此文件引入到main.js中替换掉原先的样式

         // import 'element-plus/dist/index.css'
         import './styles/element/index.scss'
         

2. 在项目中按需引入element-plus

   1. 安装

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

   2. 在vite.config.js中导入

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

   3. 自定义主题

      1. 在styles/element/index.scss文件中

         @forward 'element-plus/theme-chalk/src/common/var.scss' with (
           $colors: (
             'primary': (
               'base': green,
             ),
           ),
         );
         

      2. 在vite.config.js中

           css: {
             preprocessorOptions: {
               scss: {
                 additionalData: `@use "@/styles/element/index.scss" as *;`,
               },
             },
           },
         //plugins中的Components：
         Components({
           resolvers: [ElementPlusResolver({importStyle: "sass",})],
         })