Vant按需加载

• 安装： 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的如出一辙，可以去用一下。

参考文章： Vue项目中戳中你痛点的问题及办法

转载于:https://juejin.im/post/5cbff700e51d456e361ed904