element-plus的自动导入和按需导入方式详解
element-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 pathclass="lazy" data-src = path.resolve(__dirname, 'class="lazy" data-src')
export default defineConfig({
esolve: {
alias: {
'@': pathclass="lazy" data-src,
},
},
plugins: [
vue(),
AutoImport({
resolvers: [
ElementPlusResolver(),
IconsResolver({
prefix: 'Icon',
}),
],
dts: path.resolve(pathclass="lazy" data-src, 'auto-imports.d.ts'),
}),
Components({
resolvers: [
ElementPlusResolver(),
IconsResolver({
enabledCollections: ['ep'],
})
],
dts: path.resolve(pathclass="lazy" data-src, 'components.d.ts'),
}),
Icons({
autoInstall: true,
}),
]
})总结
到此这篇关于element-plus自动导入和按需导入的文章就介绍到这了,更多相关element-plus自动导入和按需导入内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
