按照官方的教程,现在app.json引入组件
"usingComponents": {
"van-area": "@vant/weapp/area/index"
}
下载Vant 官方提供的默认的省市区数据
npm i @vant/area-data
然后在xxxx.js文件引入并使用
import {
areaList } from '@vant/area-data';
Page({
data: {
areaList,
},
});
根据官方的教程操作,发现并没有什么用,还会出现如下报错:
然后不管我怎么修改路径都会出现报错。
解决办法
1、可以在miniprogram_npm/@vant/area-data文件里面看到这个index.esm.js文件,里面就是官方要求格式的省市区代码和名称,我们把这个文件复制到其他文件夹里
2、 删掉下载的area-data文件夹,通过下面的命令重新下载。
npm i area-data@3.1.2
此时下载的依赖在node-module根目录下
3、把之前复制到其他文件夹里的index.esm.js文件拷贝到area-data文件夹下的data.js。最后把整个新的area-data文件夹移动到miniprogram_npm/@vant下面。
4、最后在xxx.js文件中重新引入使用
import {
areaList } from '../../miniprogram_npm/@vant/area-data/data';
Page({
data: {
areaList,
},
});