vant在Vue页面内实现按需引入

女爷i 2023-03-01 03:30 7阅读 0赞

[https://xim6.cn/archives/63.html][https_xim6.cn_archives_63.html]  参考

[https://blog.csdn.net/weixin\_45416117/article/details/100036688][https_blog.csdn.net_weixin_45416117_article_details_100036688] 参考

### 首先安装了vant ###

npm i vant -S

### 按需引入  ###

[babel-plugin-import][] 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装插件
    npm i babel-plugin-import -D

在.babelrc中配置plugins（插件）

"plugins": [
        "transform-vue-jsx", 
        "transform-runtime",
        ["import",{"libraryName":"vant","style":true}]
      ]

在main.js中添加你要引入的(不推荐)

import \{ Area,Popup \} from 'vant';  
Vue.use(Area);  
Vue.use(Popup);

### 推荐下面第二种页面内引入组件: ###

1.引入几个组件，就在\{\}里面写入几个组件

import { Area, Popup } from "vant";

2.有几个组件，就在component里面按照样子写几个

components: {
         [Area.name]: Area,
         [Popup.name]: Popup
    },

### 参考代码:  ###

<template>
      <div class="div1">
        <button @click="showPopup">选择地址</button>
        <van-popup v-model="areaShow" position="bottom">
          <van-area title="请选择地址" @cancel="areaShow=false" value="" @confirm="confirmFn" :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" />
        </van-popup>
      </div>
    </template>
    
    <script>
    import { Area, Popup } from "vant";
    import areaList from "../utils/area"; //导入全国地区数据
    export default {
        data(){
            return {
                areaList:areaList,
                areaShow: false,
            }
        },
        components: {
            [Area.name]: Area,
            [Popup.name]: Popup
        },
        methods:{
         showPopup() {
          this.areaShow = true;
        },
        confirmFn(e){
          console.log(e);
          this.areaShow = false;
        },
      }
       
    }
    </script>

[https_xim6.cn_archives_63.html]: https://xim6.cn/archives/63.html
[https_blog.csdn.net_weixin_45416117_article_details_100036688]: https://blog.csdn.net/weixin_45416117/article/details/100036688
[babel-plugin-import]: https://github.com/ant-design/babel-plugin-import