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

首先 创建一个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/resolversElementPlusResolver({// 关键：自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用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上构建一个）

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享