許久許久沒(méi)有更新了，沒(méi)辦法項(xiàng)目寫(xiě)不完，空閑時(shí)間只想休息。。

臨時(shí)更新是因?yàn)榻裉炫龅揭粋€(gè)vant2插件問(wèn)題，浪費(fèi)了我整整一個(gè)小時(shí)啊。。。為了記住這個(gè)坑，特意花點(diǎn)時(shí)間記一下。

首先根據(jù)官方原文

全局引入

"usingComponents":{"van-area":"@vant/weapp/area/index"}

然后直接使用

<van-area area-list="{{ areaList }}" />

這里沒(méi)問(wèn)題，還是原汁原味，然后關(guān)于這個(gè)arealist就出了問(wèn)題，我相信大家引用這個(gè)組件都是不愿意寫(xiě)一堆省市區(qū)數(shù)據(jù)，那么引入他官方的數(shù)據(jù)就很有必要了，我們附上他的官方文檔方法：

@vant/area-data

Vant 官方提供了一份默認(rèn)的省市區(qū)數(shù)據(jù)，可以通過(guò)@vant/area-data引入。

yarn add @vant/area-data

引入

import { areaList } from '@vant/area-data';Page({ data: { areaList, },});

這里就出了問(wèn)題，顯示MiniProgramError @vant/area-data，我是小白，我第一個(gè)反應(yīng)是woc路徑錯(cuò)誤。改了許久我尋思好像不是啊，那哪除了問(wèn)題啊。重申一遍我是小白，第二個(gè)反應(yīng)就是百度，找了半個(gè)多小時(shí)沒(méi)找著有用的東西。但是，功夫不負(fù)有心人，終于找到一個(gè)類似的方法，雖然沒(méi)有解釋原因，但也提供了方法。

我們?cè)谝呀?jīng)下載好的area-data里，把index.esm.mjs文件拷出來(lái)，然后反手炸了文件夾（刪除）。然后我們打開(kāi)終端，輸入

npmiarea-data@3.1.2

靜靜等待（這個(gè)有點(diǎn)慢，反正我等了半天），ok以后我們?cè)趎ode-module里找到area-data，把拷出來(lái)的文件粘貼進(jìn)去，改名成xxx.js（我是改成了data.js），我記得下載好的文件夾里好像也有哥data.js來(lái)著，不用管直接覆蓋。這里我們就可以把文件夾之家剪切回我們的miniprogram_npm/@vant下面，然后更改引用路徑

import{ areaList }from'../../miniprogram_npm/@vant/area-data/data';

這時(shí)候報(bào)錯(cuò)就木有了，唉。所以說(shuō)啊官方文檔也不一定全是對(duì)的，真的難頂。這里再貼一下原作者的帖子，畢竟我是看了人家的方法：vant-weapp Area 省市區(qū)選擇的使用及遇到的坑_liuye066的博客-CSDN博客_vant省市區(qū)選擇