首先创建一个vite项目

这里vite-vue-ts是项目名

npm create vite@latest vite-vue-ts -- --template vue

接下来按步骤选择即可

使用ElementPlus组件库

unplugin-vue-components , 自动导入组件库

这里用到了unplugin-vue-components , 也可以选择使用ElementPlus官方提供的导入工具unplugin-element-plus。

import Components from 'unplugin-vue-components/vite' // 组件的自动导入
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 组件的自动导入的解析器
...
plugins:[
...
    Components({
      dirs: ['src/components'], // 项目公共组件路径
      extensions: ['vue'], // 组件有效的文件扩展名 
      dts: 'src/components.d.ts', // 生成自动导入组件的文件的路径
      deep: true, // 是否搜索子目录
      include: [/.vue$/, /.vue?vue/], // 自动导入的目标文件
      exclude: [/[\/]node_modules[\/]/, /[\/].git[\/]/, /[\/].nuxt[\/]/], // 忽略自动导入的文件
      resolvers: [ // 自动导入的组件库的解析器 -用于接收 unplugin-vue-components/resolvers
        ElementPlusResolver({
          // 关键：自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
          importStyle: 'sass'
        })
      ]
    }),
]

unplugin-auto-import , 自动导入hooks

import AutoImport from 'unplugin-auto-import/vite' // hook的自动导入
plugin:[
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia', //全量导入
      { // 部分导入
        '@vueuse/core': [
          'useMouse',
          ['useFetch', 'useMyFetch'] // 别名设置
        ],
      }],
      // 自定义项目公用的hooks、api、工具函数 see https://github.com/antfu/unplugin-auto-import/pull/23/
      resolvers: [ElementPlusResolver({
        // 关键：自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
        importStyle: 'sass'
      })],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      dts: 'src/auto-import.d.ts'
    }),
]

主题化ElementPlus

新建scss文件覆盖内置组件变量

我新建的文件路径在这

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
    $colors: (
        'primary': ('base': green,),
    ),
    $button-padding-horizontal: (
        "default": 10px
    )
);

vite.cofig.ts 内配置，这里用的按需导入的配置

resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`, // 设置别名
    }
  },
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/assets/styles/element/index.scss" as *;` // 自定义主题变量
      }
    }
  },

完成

按需导入和主题化就这么多内容这个项目是我新建的个模板项目，目前正在构建优化过程中，项目地址在下面，欢迎大佬们提意见！ gitee.com/liu-project…

~~对了，现在自动按需导入已经不需要用vite-plugin-style-import来修复引入的样式问题了~~ （是我见识浅了，按需自动导入加上主题化之后引入组件的样式还是有问题，用了unplugin-element-plus来解决的，如果不需要自动导入组件就只使用unplugin-element-plus就可以，需要自动导入组件的话就要加上unplugin-vue-components）模板项目成品地址http://101.37.168.189/#/ （使用jenkins构建的项目地址，还没买域名，暂时先用着，后面有时间会在gitee上构建一个）

Vite+ElementPlus(主题化)按需导入+Vue

首先 创建一个vite项目