前端页面为了提高加载的速度和性能，通常采用路由和组件的按需加载，其实在引入elemnet-plus时，也可以按需加载它里面的组件。下面就来介绍下全局引入和按需引入elemnet-plus组件的方式，并对这两种引入方式进行对比；同时，介绍如何自定义主题色。
安装element-plus插件。
npm install element-plus --save
在main.ts中引入
import ElementPlus from 'element-plus' // 添加此行
import 'element-plus/theme-chalk/index.css' // 添加此行
const app = createApp(App)
app.use(ElementPlus) // 添加此行
app.mount('#app')
在vue文件中直接使用即可，此处以Button组件为例
<template>
<div class="demo">
<el-button type="primary">Primary</el-button>
</div>
</template>
在浏览器network查看引入element-plus的效果，可以看到文件大小为2.2MB
除了下载element-plus插件，还需要下载unplugin-vue-components 和 unplugin-auto-import 这两个插件
npm install -D unplugin-vue-components unplugin-auto-import
配置vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite' // 添加此行
import Components from 'unplugin-vue-components/vite' // 添加此行
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 添加此行
export default ({ mode }: {mode: any}) => {
return defineConfig({
plugins: [vue(),
vueJsx(),
AutoImport({ // 添加此配置
resolvers: [ElementPlusResolver()],
}),
Components({ // 添加此配置
resolvers: [ElementPlusResolver()],
}),
],
})
}
在浏览器network查看引入element-plus的效果，可以看到每个文件都很小
新建样式scss文件，例如在src下新建style文件夹，新建element.scss文件
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: (
"primary": ("base": red),
)
);
@use "element-plus/theme-chalk/src/index.scss" as *
配置vite.config.ts
export default ({ mode }: {mode: any}) => {
return defineConfig({
plugins: [vue(),
vueJsx(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('https://www.ctyun.cn/developer/article/src', import.meta.url))
}
},
css: {
// css预处理器
preprocessorOptions: { // 添加此配置
scss: {
additionalData: `@use "@/assets/style/element.scss" as *; `,
}
},
}
})
}
此时，页面中引入element-plus组件时的主题就变成了自己设置的。例如下面的组件
<template>
<div class="demo">
<el-button type="primary">Primary</el-button>
</div>
</template>