小程序引入第三方组件库Vant Weapp
发布时间
阅读量：
阅读量
最近在看小程序中引入第三方组件相关知识，在引入过程中一直出现各种问题和报错最终终于成功暗中使用；以下为 npm安装的步骤及安装过程中可能的报错和小编认为的原因。
vant-weapp中文文档：https://youzan.github.io/vant-weapp/
1、打开微信开发者工具，选择目录 > 输入APPID > 确定
2、在文件根目录下右键 (一定要是根目录) > 选择在内建终端中打开
一定要是根目录，如果不是根目录可以使用cd进行切换 cd ../ 切换到上一层
4、我在这里使用的是npm安装
1：初始化
npm init
2：安装依赖
npm install --production
3：安装使用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"
}
}
javascript
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>
javascript
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>
html
end~~最后附上小编在安装过程中遇到的一些列问题（当然也是因为小编比较菜）附上链接，暂时整理了这两个，如有其他可以留言小编
<>
全部评论 (0)
还没有任何评论哟~