为什么要使用按需加载的方式而不是一次性全部引入,原因就不多说了。这里以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
库外,像antiUi
、elementUi
等,很多ui库都支持按需加载,可以去看文档,上面都会有提到。基本都是通过安装babel-plugin-import插件来支持按需加载的,使用方式与vant的如出一辙,可以去用一下。