当前位置: 首页 > news >正文

vue3 UI组件优化之element-plus按需导入

如果不在意项目打包体积大小,正常来讲element-plus 是这样用的

import ElementPlus from 'element-plus'
//引入样式
import "element-plus/dist/index.css";app.use(ElementPlus);

但是呢要是项目就用了几个弹窗提示什么的,全局引入包体积很大

所以使用了Vite插件

import { ElementPlusResolver } from "unplugin-vue-components/resolvers";plugins: [Components({dirs: ["./src/components", "src/views"],extensions: ["vue"],deep: true,resolvers: [ElementPlusResolver()]})
]

这个插件可以按需导入ElementPlus组件,并且是自动导入,不需要你再单个组件按需导入

import {ElNOtification} from 'element-plus'

但是引入完之后默认是英文模式的,这个时候就需要使用中文包

在App.vue里面

<template><el-config-provider :locale="zhCn"><BasicLayout></BasicLayout></el-config-provider>
</template><script setup>
import zhCn from "element-plus/dist/locale/zh-cn.mjs";

就可以了

http://www.lryc.cn/news/213352.html

相关文章:

  • 如何创建 Spring Boot 项目
  • 【经验分享】openGauss容灾集群搭建
  • 互联网应用架构的演进(八大架构的演进过程)
  • ROS自学笔记二十六:导航中激光雷达消息
  • 分类模型的评价指标
  • 第五章 I/O管理 八、缓冲区管理
  • 笔记软件推荐!亲测好用的8款笔记软件!
  • MPJQueryWrapper 用法
  • 50元买来的iPhone手机刷机经验
  • 数据结构学习笔记——链式表示中的双链表及循环单/双链表
  • DC电源模块去除输出电源中的高频噪声及杂波
  • 【驱动开发】注册字符设备使用gpio设备树节点控制led三盏灯的亮灭
  • 面向制造企业的持续发展,2023数字化工单管理系统创新篇章-亿发
  • mysql 元数据锁 MDL读锁与MDL写锁
  • 批量预处理哨兵2影像
  • Unity地面交互效果——2、动态法线贴图实现轨迹效果
  • 视频剪辑达人教您:如何运用嵌套合并技巧制作固定片尾
  • 【腾讯云 TDSQL-C Serverless 产品体验】TDSQL-C MySQL Serverless最佳实践
  • SQLyog连接数据库报plugin caching_sha2_password could not be loaded......解决方案
  • linux应急排查
  • Apache POI及easyExcel读取及写入excel文件
  • 为什么写作
  • python基于VGG19实现图像风格迁移
  • BoredHackerBlog: Cloud AV RT日记
  • 数据结构之“初窥门径”
  • css:transform实现平移、旋转、缩放、倾斜元素
  • 如何理解AutoGPT
  • 【网络知识必知必会】聊聊网络层IP协议
  • 66. 加一
  • 逻辑(css3)_强制不换行