小程序引入vant weapp组件的方法

简介: 小程序引入vant weapp组件的方法

官方文档Vant Weapp - 轻量、可靠的小程序 UI 组件库

安装时不要按照官方的走

流程:

npm下载

npm i @vant/weapp -S --production

下载完的目录

678b4d9730814857a7a6656fe5286bfd.png 2. 把里面的dist文件夹复制出来,放到项目的根目录,重命名为vantweapp

现在的结构目录如下

c23654e81bbc4f118418dd14d0725890.png


3. 使用组件,以button为例,这是官方的引入,将红框中的复制,写在app.json

d35c612696754249987a01a6a53ccbd3.png

4. 将路径改成这样

"van-button": "vantweapp/button/index"

66603c6b0c874b04917dc9f3db58efbb.png

5. 如果是写在单个页面的json中,路径前面加../../

072146c264a243febe80f2d36d9f2236.png


相关文章
|
29天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
2月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
29天前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
18天前
|
小程序
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
38 3
|
25天前
|
小程序 开发者 Windows
【微信小程序】微信开发者工具 内容错误 pages/cart/cart.json: [“usingComonent“][“van-card“]: “@vant/weapp/card/indx“ 未找到
【微信小程序】微信开发者工具 内容错误 pages/cart/cart.json: [“usingComonent“][“van-card“]: “@vant/weapp/card/indx“ 未找到
16 0
|
27天前
|
小程序 数据库
【微信小程序7】云开发中实时聊天系统的实现方法
【微信小程序7】云开发中实时聊天系统的实现方法
23 0
|
27天前
|
小程序
【微信小程序6】引入第三方UI的方法(ColorUi)
【微信小程序6】引入第三方UI的方法(ColorUi)
17 0
|
29天前
|
小程序 JavaScript
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
|
1月前
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
11 0
|
2月前
|
JSON 资源调度 小程序
一个强大的小程序富文本组件mp-html
一个强大的小程序富文本组件mp-html
31 0