文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

element-plus的自动导入和按需导入方式详解

2022-11-13 14:40

关注

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-componentsunplugin-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,
    }),
  ]
})

总结

到此这篇关于element-plus自动导入和按需导入的文章就介绍到这了,更多相关element-plus自动导入和按需导入内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯