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封装全局toast组件的完整实例)
- vue 动态绑定指令(vue动态绑定图标的完整步骤)
- vue将弹框抽离成组件(vue3 可拖动的左右面板分割组件实现)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue加载html5动画(vue实现旋转木马动画)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue怎么实现输入框(vue车牌输入组件使用方法详解)
- vue项目做过哪些打包优化(Vue项目优化的一些实战策略)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vue3 composition api用法(vue3中provide和inject的使用)
- vue调用组件内部的方法(Vue如何实现组件间通信)
- vue的修饰符都有哪些(详解Vue的sync修饰符)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- 详解从vue的组件传值着手观察者模式(详解从vue的组件传值着手观察者模式)
- vue-router的安装(详解Vue-Router的安装与使用)
- vue怎么实现预览与放大(Vue实现牌面翻转效果)
- 宋轶除了演过于曼丽,原来还演过一个青楼女子(宋轶除了演过于曼丽)
- 赵丽颖第一部当女主的戏,主角配角个个都是实力演员(赵丽颖第一部当女主的戏)
- 乾隆为何这么喜爱白塔原因是什么(乾隆为何这么喜爱白塔原因是什么)
- 逐渐消失的东北八大怪现象,进步的社会里我们遗失的是什么(逐渐消失的东北八大怪现象)
- 今日大雪,大雪养生这样做,一年都有好气色(大雪养生这样做)
- 粗盐是什么 粗盐的功效与作用(粗盐的功效与作用)
热门推荐
- centos7.5安装mysql教程(CentOS8下MySQL 8.0安装部署的方法)
- python画折线图(python使用Plotly绘图工具绘制水平条形图)
- Html5新增的标签
- dede执行查询语句(dede调用指定栏目下相关文章的实现方法)
- python算法图解(python实现kmp算法的实例代码)
- angularjs使用指令(详解Angular路由动画及高阶动画函数)
- opencv提取图像轮廓python代码(Python基于opencv调用摄像头获取个人图片的实现方法)
- mysql 死锁原因(MySQL锁等待与死锁问题分析)
- 网站建好后怎么选服务器(搭建网站时如何选择服务器?)
- apache https配置(Apache httpd 安装module mod_expires、mod_deflate的方法)