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按需加载组件库内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- google 调试vue(Vue实现Google第三方登录的示例代码)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue react和angular(详解React Angular Vue三大前端技术)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue怎么在中间加图片(Vue实现多图添加显示和删除)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue源码系列教程(vue使用引用库中的方法附源码)
- vue页面关闭前的执行(Vue 页面监听用户预览时间功能的实现代码)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
- 赢麻了 富士公布2021年度财报 营利同比增长240(富士公布2021年度财报)
- 医事文化谈屑 | 古人的名 字 号(医事文化谈屑古人的名)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9