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";

就可以了

相关推荐
你挚爱的强哥4 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
天天进步20157 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript