element-plus自动导入和按需导入
acgCode 人气:8element-plus根据官网文档,推荐用户采用按需导入的方式进行导入。
我的项目是使用vite进行构建的,根据官网的文档,利用unplugin-vue-components
插件进行自动按需导入。
当我们使用element的标签时,无需再使用import对组件进行导入。
例如:
<el-button>test</el-button>
会自动引入ElButton组件。
不过当我们想要使用命令的方式创建element组件时,样式会无法自动引入。
我们以ElMessage为例。
import { ElMessage } from 'element-plus' ElMessage.warning('warning')
如果不采用import的方式引入,会直接报错:ElMessage没有定义。所以这个import是省不了了。但是import了之后,消息弹窗是出来了,但是却没有样式。这该怎么办呢?
仔细阅读文档,我们可以发现在手动导入里,使用了一个叫unplugin-element-plus
的插件。该插件的官方文档有详细的使用说明,插件的主要功能如下:
import { ElButton } from 'element-plus' // ↓ ↓ ↓ ↓ ↓ ↓ import { ElButton } from 'element-plus' import 'element-plus/es/components/button/style/css'
我们可以看出,这个插件其实就是把你需要的组件的css或者sass文件自动引入进来,刚好弥补了上面的问题。
最后我们如下配置项目:
首先我们要安装unplugin-vue-components
和unplugin-element-plus
。
npm i unplugin-vue-components unplugin-element-plus -D
之后配置一下vite.config.js文件。
import ElementPlus from 'unplugin-element-plus/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ ElementPlus({ importStyle: 'sass', useSource: true }), Components({ resolvers: [ElementPlusResolver()] }) ] })
这样配置之后,我们就可以享用element-plus的自动导入了。当然使用命令的组件还是需要你手动导入一下的。
补充:elementPlus图标自动引入
首先安装插件
npm i -D unplugin-icons unplugin-vue-components
下载图标库
npm i @element-plus/icons-vue
配置vite.config.js
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 Icons from 'unplugin-icons/vite' import IconsResolver from 'unplugin-icons/resolver' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' const pathSrc = path.resolve(__dirname, 'src') export default defineConfig({ esolve: { alias: { '@': pathSrc, }, }, plugins: [ vue(), AutoImport({ resolvers: [ ElementPlusResolver(), IconsResolver({ prefix: 'Icon', }), ], dts: path.resolve(pathSrc, 'auto-imports.d.ts'), }), Components({ resolvers: [ ElementPlusResolver(), IconsResolver({ enabledCollections: ['ep'], }) ], dts: path.resolve(pathSrc, 'components.d.ts'), }), Icons({ autoInstall: true, }), ] })
总结
加载全部内容