vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
类别:编程学习 浏览量:339
时间:2022-01-17 01:02:11 vue3 兄弟组件
vue3如何按需加载第三方组件库详解前言
以Element Plus 为例,配置按需加载组件和样式。
环境
- vue3.0.5
- vite2.3.3
安装 Element Plus
yarn add element-plus # OR npm install element-plus --save
完整引入
import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import App from './App.vue'; const app = createApp(App) app.use(ElementPlus) app.mount('#app')
可以看出 Element Plus 的 js 和 css 文件大小和耗时都挺大。
按需加载
安装 vite-plugin-importer 插件
安装
yarn add vite-plugin-importer # OR npm install vite-plugin-importer --save
在 vite 官网中有 插件 一栏,可以使用推荐的 社区插件
其中,vite-plugin-importer 是 babel-plugin-import 的集成,而 babel-plugin-import
可以按需加载组件和组件样式,故 vite-plugin-importer
亦能。
配置 vite.config.js
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import usePluginImport from 'vite-plugin-importer' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), usePluginImport({ libraryName: 'element-plus', customStyleName: (name) => { return `element-plus/lib/theme-chalk/${name}.css`; }, }), ], resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler.js' }, }, })
main.js
import { createApp } from 'vue' import App from './App.vue' import { ElButton, ElSelect } from 'element-plus'; const app = createApp(App) app.component(ElButton.name, ElButton); app.component(ElSelect.name, ElSelect); app.mount('#app')
使用 vite-plugin-importer
按需加载组件和样式效果明显。
安装 vite-plugin-style-import
安装
yarn add vite-plugin-style-import -D # OR npm i vite-plugin-style-import -D
Element Plus 官网中提供了vite-plugin-style-import 按需加载的方式。
配置
vite.config.js
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import styleImport from 'vite-plugin-style-import'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), styleImport({ libs: [ { libraryName: 'element-plus', esModule: true, ensureStyleFile: true, resolveStyle: (name) => { return `element-plus/lib/theme-chalk/${name}.css`; }, resolveComponent: (name) => { return `element-plus/lib/${name}`; }, }, ], }), ], resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler.js' }, }, })
main.js
import { createApp } from 'vue' import App from './App.vue' import { ElButton, ElSelect } from 'element-plus'; const app = createApp(App) app.component(ElButton.name, ElButton); app.component(ElSelect.name, ElSelect); app.mount('#app')
可以看出,vite-plugin-style-import
只按需加载组件样式。
总结
- vite-plugin-importer 可以按需加载组件和组件样式。
- vite-plugin-style-import 只能按需加载组件样式。
- 相比一次加载第三方组件库,按需加载更优秀。
到此这篇关于vue3如何按需加载第三方组件库的文章就介绍到这了,更多相关vue3按需加载组件库内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue图片切换软件(Vue实现简单图片切换效果)
- vue离线地图有哪些(vue 集成腾讯地图实现api附DEMO)
- vue原理详解(vue响应式原理与双向数据的深入解析)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- vue项目步骤(Vue项目中常用的实用技巧汇总)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- vuex原理及使用方法(Vuex状态机的快速了解与实例应用)
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- vue中的指令及用法(详解Vue进阶构造属性)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue组件详解(Vue的方法和属性案例详解)
- 网友抵制 多地取消 夏日祭 为何惹众怒(网友抵制多地取消)
- 兄弟萌,今年的七夕又取消了 思考 思考(今年的七夕又取消了)
- 七夕取消是什么梗(七夕取消是什么梗)
- 这竟然是捏出来的 20种橡皮泥玩法让你轻松hold住魔娃(这竟然是捏出来的)
- 自制橡皮泥(自制橡皮泥)
- 还在卖 禁药西布曲明网上论斤卖(还在卖禁药西布曲明网上论斤卖)
热门推荐
- dedecms上传附件大小限制(dedecms删除文章同时也删除附件的修改方法)
- C#中ArrayList与Array的区别
- python能操作微信定时发消息(python给微信好友定时推送消息的示例)
- 运营人员应具备的基本技能
- python贪吃蛇项目介绍(python简单贪吃蛇开发)
- python里字典常用方法(Python使用字典的嵌套功能详解)
- dede栏目下有内容却不显示(dedecms列表不显示第一个元素如分隔符的简单方法)
- nginx安全配置提示(wdcp Linux面板nginx启用gzip后js未压缩解决方案)
- 织梦内容页编辑使用方法(织梦更新后如何去掉底部的织梦版权信息powered by dedecms)
- 卸载了云服务器后怎么办(云服务器怎么还原被删除的数据?)