vue-vue-cli vant的按需引入

1,435 阅读1分钟

需要下载   babel-plugin-import 插件

npm i babel-plugin-import -D

创建.babelrc文件


在.babelrc文件写入

{    "plugins": [        ["import", {          "libraryName": "vant",          "libraryDirectory": "es",          "style": true        }]      ]}

然后在需要vant组件的代码里引入,例如:

<template>    <div class="detail">    <van-tabbar v-model="active">  <van-tabbar-item icon="home-o">标签</van-tabbar-item>  <van-tabbar-item icon="search">标签</van-tabbar-item>  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>  <van-tabbar-item icon="setting-o">标签</van-tabbar-item></van-tabbar>    </div></template>  <script>  import { Tabbar, TabbarItem } from 'vant';    export default {      components:{         [Tabbar.name]:Tabbar,         [TabbarItem.name]:TabbarItem,      },        data () {            return {                active:0            }        },        methods: {}    }</script><style scoped></style>

注:一定要写components!!

然后重启项目,搞定!