vant-weapp 提供的areaList城市数据的路径问题

于 2024-04-01 18:47:33 发布
阅读量284 收藏
点赞数 9
文章标签： 前端 微信小程序 css html 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/furygdk/article/details/137242791
版权

根据vant 官网提供的引入方法会报错。

通过add @vant/area-data会下载一份index.esm.mjs文件城市数据在项目中，我尝试了用各种路径来获取还是报错，最后只能将该index.esm.mjs文件复制到其他文件中，然后引入就可以了。

 1.新建一个文件夹专门放数据的，然后在建个文件用来放这个数据。我建的文件名是city.js

然后把index.esm.mjs文件的所有内容拷贝到city.js中，后面直接在需要的地方引入这个city.js文件就行。

引入

  

成功显示

        

furygdk
关注
  • 9
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vant中地址组件的使用
weixin_45803990的博客
10-19 1754
1、引入vant import Vue from ‘vue’; import { Area } from ‘vant’; Vue.use(Area); 2、 主要代码 <van-area title="标题" :area-list="areaList" /> // 引入areaList对应的js文件 import areaList from "@/assets/arealist/index.js" export default { data(){ return{.
vue vant Area组件使用详解
Gblfy_Blog
01-10 2058
文章目录1. 下载areaList.js2. 组件注册3. 封装组件4. 使用组件5. 效果图6. area.js源码 1. 下载areaList.js 见文章末尾 2. 组件注册 main.js引入并注册(一般与Popup一起使用) 全局注册 //全局导入所有组件 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant) 局部注册 import { Area, Popup } from 'vue-router' V.
【Vue2】Vant使用Vant Area Data中国省市区数据保姆级教程 Vue2移动端项目实战vant组件 area组件
qq_51055690的博客
08-11 7463
Vue中使用Vant的地址组件，Vue使用@vant/area-data npm i @vant/area-data保姆级教程
vant的地址编辑组件van-address-edit关于地区areaList的问题
qq_41026858的博客
01-13 2664
在vue3中使用vant 在安装vant的时候没有附带下载该地址列表,在使用时需要自己手动下载省市区数据 npm i @vant/area-data -D 安装完成之后在页面导入 import { areaList } from '@vant/area-data'; <van-address-edit :area-list="areaList" :address-info="addressInfo" :show-delete="type === 'edit'"
vant插件使用area组件使用心得
MengLi的博客
10-31 9688
1.官方给出的方法中的value是设置默认值的，字符串设置成区的就ok 2.areaList是可以自定义的 <template> <div class='levelLinkage' v-show='chooseshow'> <div class='mask' @click="close">...
微信小程序引入vant-weapp
01-03
2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x ...
vant-weapp-uniapp:vant-weapp的uniapp演示（仅微信小工具）
05-09
vant-weapp版本为1.6.7. vant weapp的组件库，都在工程的wxcomponents目录下。pages目录下是各个示例页面。 图片上传服务 提供了图片Nodejs服务 ，代码路径为\src\node-image-upload-server 安装npm包 npm install ...
vant-weapp.zip
11-22
小程序使用vant-weapp框架确实便捷，但是官方生成的wxss文件单位都是px，和我们平时的rpx存在一些适配兼容问题，文件是 px转成rpx后的文件。
参照Vant-Weapp开发的抖音原生小程序UI组件库.zip
最新发布
02-25
如题，抖音小程序源码，易于运行部署，用于学习交流
微信小程序npm引入vant-weapp的踩坑记录
12-01
微信小程序项目使用npm安装vant-weapp的正确步骤  使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装...
arealist
09-05
服务器列表服务器列表
vant框架引入省市区
qq_38958284的博客
08-20 1302
import { areaList } from '@vant/area-data'; 使用框架： vue-cli 、vant 1、在src目录中的main.js中引入vant里的Area组件（见最后一个）并use 2、在项目目录使用命令下载省市区文件 npm add @ vant/area-data 3、在组件中引入该文件 注意，在引入的时候不要写错了！！ import { areaList } from '@vant/area-data'; 4、使用Area组件即可...
vant area地区选择组件使用方法
蓑笠翁
01-03 7343
目录一、介绍二、引入1、安装vant2、安装vant 一、介绍   Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本。   地区层级选择组件属于比较复杂的业务组件，使用vant地区选择组件同时，可以对组件样式进行修改，以满足个人业务要求。 二、引入 1、安装vant
@vant/area-data省市县/区数据的使用
彭世瑜的博客
01-20 6388
areaList 格式 areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。 每项以地区码作为 key，省市区名字作为 value。 地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。 比如: 北京的地区码为 11，以 0 补足 6 位，为 110000。 示例数据如下： const areaList = { province_list: { 110000: '北京市', 1
使用vant完成 Area省市区选择。
柠檬不萌只是酸i
10-29 7519
效果展示： 组件使用的文件： area.js文件。area.js文件详见 注意： 记得在main.js里面引入响应的组件。 组件代码： 【可以自己封装写个公共的组件】 <template> <!-- 省市区的三级联动 传入的数据的格式： { province_list:{}, city_list:{}, ...
vant填坑之area
qq719756146的博客
04-05 3721
转载： https://www.jianshu.com/p/770a54e1a39c <van-area :area-list="arrylist" :columns-num="1" @change="onChange" :value="130000" /> onChange(pi...
vant-Area省市区联动
W_Zhulin的博客
05-24 1298
vant按需引入 import { Cell, CellGroup, Popup, Field, Area, Picker } from 'vant’ Vue.use(Area) Vue.use(Popup) Vue.use(Cell) Vue.use(CellGroup) Vue.use(Field) Vue.use(Picker) <template> <div class="wzl_address"> <!--confirm 点击右上方完成按钮
vant中list列表组件使用(附详细注释)
热门推荐
dujyong的博客
03-12 3万+
vant中list组件使用 html: <van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load="onLoad" ...
uniapp开发微信小程序需要使用vant-weapp组件库，hbuild编译器如何安装vant-weapp组件
07-27
要在HBuilderX中安装vant-weapp组件库，你可以按照以下步骤操作： 1. 打开HBuilderX，进入你的uni-app项目。 2. 在项目根目录下，找到 `manifest.json` 文件。 3. 在 `manifest.json` 文件中，找到 `"easycom"` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值