vue3+vite2+elment plus按需自动引入+国际化配置

作者：管理员 2022-06-08 14:24:26 分类：Vue3新篇章阅读（830） 0

目前element plus还在快速迭代阶段（更新日志），配置不同版本有不小改动，本节主要记录vue3+vite2+elment plus（v2.2）按需引入+国际化配置，在按需自动导入以及国际化这块踩了大坑，搞了一下午，有任何bug应时刻关注官方社区问题汇总

按需自动导入

通常来讲做实际项目时候我们都应该组件按需导入，这能大大降低项目打包后的代码，同时显著提高单页首页加载速度，elment plus提供了新的按需加载方式——按需自动导入，和传统手动按需导入不同，这里我们需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

1	npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的Vite中即可，main.js上无需再添加任何element plus相关代码，连同css都是按需导入加载的，甚至ElMessage这类组件都可以直接使用，简直美丽极了，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})

// main.ts
import 'element-plus/dist/index.css'

语言配置

按需加载后，官方也给我们提供了新的国家化方式

剩余50%内容付费后可查看

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(2) 打赏

标签：

上一篇：vue3+vite2+ts项目配置环境变量和模式

下一篇：npm升级package.json中所有依赖包到最新版本

vue3+vite2+elment plus按需自动引入+国际化配置

按需自动导入

语言配置

相关推荐

共 0 条评论关于"vue3+vite2+elment plus按需自动引入+国际化配置"

点击取消