UI库的按需加载(vue的问题)

简介: UI库的按需加载(vue的问题)

为什么要使用按需加载的方式而不是一次性全部引入,原因就不多说了。这里以vant的按需加载为例,演示vue中ui库怎样进行按需加载:

  • 安装:cnpm i vant -S
  • 安装babel-plugin-import插件使其按需加载:cnpm i babel-plugin-import -D
  • 在 .babelrc文件中中添加插件配置
libraryDirectory {
    
    "plugins": [
        // 这里是原来的代码部分
        // …………
 
        // 这里是要我们配置的代码
        ["import",
            {
                "libraryName": "vant",
                "libraryDirectory": "es",
                "style": true
            }
        ]
    ]
}

在main.js中按需加载你需要的插件:

// 按需引入vant组件
import {
    DatetimePicker,
    Button,
    List
} from 'vant';

使用组件:

// 使用vant组件
Vue.use(DatetimePicker)
    .use(Button)
    .use(List);

最后在在页面中使用:

<van-button type="primary">按钮</van-button>

ps:出来vant库外,像antiUielementUi等,很多ui库都支持按需加载,可以去看文档,上面都会有提到。基本都是通过安装babel-plugin-import插件来支持按需加载的,使用方式与vant的如出一辙,可以去用一下。

相关文章
|
22天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
27天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
15 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
2月前
|
JavaScript 前端开发
vue element-ui分页插件 始终保持在页面底部样式
vue element-ui分页插件 始终保持在页面底部样式
19 0
|
22天前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
4月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
4月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
107 0
|
4月前
|
API C# 开发者
一款开源免费美观的WinForm UI控件库
一款开源免费美观的WinForm UI控件库
292 9
|
3月前
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
|
3月前
|
Linux C# Android开发
.NET Avalonia开源、免费的桌面UI库 - SukiUI
.NET Avalonia开源、免费的桌面UI库 - SukiUI
|
7天前
|
JavaScript
vue element ui 打开弹窗出现黑框问题
vue element ui 打开弹窗出现黑框问题
16 1

热门文章

最新文章