小程序引入第三方组件库Vant Weapp

最近在看小程序中引入第三方组件相关知识，在引入过程中一直出现各种问题和报错最终终于成功暗中使用；以下为 npm安装的步骤及安装过程中可能的报错和小编认为的原因。

vant-weapp中文文档：https://youzan.github.io/vant-weapp/

1、打开微信开发者工具，选择目录 > 输入APPID > 确定

2、在文件根目录下右键 (一定要是根目录) > 选择在内建终端中打开

一定要是根目录，如果不是根目录可以使用cd进行切换 cd ../ 切换到上一层

4、我在这里使用的是npm安装

1：初始化npm init2：安装依赖npm install --production3：安装使用npm安装组件npm i @vant/weapp -S --production
或者  npm i vant-weapp -S --production两者区别（安装后需要引入的路径有区别）使用 npm i @vant/weapp -S --production  安装，引入时候；也就是文档中的方法，可直接复制文档{"usingComponents": {"van-button": "@vant/weapp/button/index"}
}使用 npm i vant-weapp -S --production 安装，引入时候{"usingComponents": {"van-button": "../../miniprogram_npm/vant-weapp/button/index"}
}

npm init时，一路回车

在这里我是用的是第一种方式依引入

5、在微信开发者工具中选择详情 > 本地设置 >勾选使用 npm模块

工具 > 构建 npm

构建完后生成一个miniprogram_npm文件，因为我是使用第一种方式安装vant所以这里下边的文件目录是@vant

6、使用vant-weapp

直接按照文档的复制使用即可 https://youzan.github.io/vant-weapp/

使用前一定要将app.json文件中的 "style": "v2", 小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。（组件文档中也提到过）

在对应页面的app.json或index.json引入组件
我是用 npm i @vant/weapp -S --production这种方式安装的，所以引入路径可以直接使用文档上，直接粘贴，不需要修改路径

<van-goods-action><van-goods-action-icon icon="chat-o" text="客服" dot /><van-goods-action-icon icon="cart-o" text="购物车" info="5" /><van-goods-action-icon icon="shop-o" text="店铺" /><van-goods-action-button text="加入购物车" type="warning" /><van-goods-action-button text="立即购买" />
</van-goods-action>

wxml中

<van-goods-action><van-goods-action-icon icon="chat-o" text="客服" /><van-goods-action-icon icon="cart-o" text="购物车" info="5" /><van-goods-action-icon icon="shop-o" text="店铺" /><van-goods-action-button color="#be99ff" text="加入购物车" type="warning" /><van-goods-action-button color="#7232dd" text="立即购买" />
</van-goods-action>

end~~最后附上小编在安装过程中遇到的一些列问题（当然也是因为小编比较菜）附上链接，暂时整理了这两个，如有其他可以留言小编

https://blog.csdn.net/weixin_47426557/article/details/119803810?spm=1001.2014.3001.5501

小程序引入第三方组件库Vant Weapp相关推荐

小程序动端组件库Vant Weapp教程
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用两大参考神兽: 文档:https://youzan.g ...
vant weapp 下拉_小程序动端组件库Vant Weapp的使用
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用两大参考神兽: 1:桌面新建一个vant文件夹 2:打 ...
uniapp微信小程序引入第三方字体库
前言最近在使用第三方字体库,然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑,收集了一些网上的资料,我大概整理下,防止以后继续踩坑这是uniapp官网的引入字体图标方法字体引入从c ...
原生微信小程序引入npm和安装Vant Weapp
目录一.引入npm+安装Vant Weapp 1.引入npm 2.安装Vant Weapp 3.修改 app.json 4.修改 project.config.json 二.构建npm 一.引入np ...
筱筱看博客（微信小程序、Lin-ui组件、vant Weapp）
今日分享 1.微信小程序我是使用微信开发者工具做的小demo.首先呢!我写了一个简单的for.点击事件. for 循环.点击的事件小demo. for 循环的案列,如下: 点击事件的案列,如下: 2 ...
微信小程序引入WeUI组件库（笔记）
1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/st ...
微信小程序引入WeUI组件库并使用组件
1. git 下载:weui,解压,打开文件夹,dist文件夹,style-->weui.wxss,复制到项目里 2.useExtendedLib引入根目录的app.json里引入 " ...
UI组件库Vant Weapp的下载和使用
Vant Weapp - 轻量.可靠的小程序 UI 组件库为了提高小程序的开发效率,通常考虑使用第三方UI组件来实现界面的视觉统一.开发者可以方便的引用已经事先设计好的自定义组件来快速搭建小程序界面 ...
微信小程序引入vant-weapp组件遇到的bug以及解决方法
微信小程序引入vant-weapp组件遇到的bug问题原本百度了一波,说只要安装了node还有npm之后,使用gitBash命令行工具直接cd到根目录下然后直接引入以下代码: npm i vant- ...

小程序引入第三方组件库Vant Weapp

小程序引入第三方组件库Vant Weapp相关推荐

最新文章

热门文章