微信小程序正确引入Vant Weapp

首先是安装VantWeapp

安装

方式一. 通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包,注意这个是在你小程序项目的目录下,

# npm
npm i vant-weapp -S --production

# yarn
yarn add vant-weapp --production

方式二. 下载代码

直接通过 git 下载 Vant Weapp 源代码,并将dist目录拷贝到自己的项目中

git clone https://github.com/youzan/vant-weapp.git

我使用的是npm,既然小程序已经支持了npm安装为啥不用呢,对吧。下面我就说说怎样使用npm安装。

在小程序项目的目录下执行

npm i vant-weapp -S --production

保证当前你的微信开发者工具是最新版本,然后点击执行“构建npm“

微信小程序正确引入Vant Weapp_第1张图片

成功以后你项目的目录里会多出一个文件夹

微信小程序正确引入Vant Weapp_第2张图片

第三步,当我们需要调用到Vant组件的时候,需要在想相对应的.json文件里添加配置:

"usingComponents": {

"van-button": "../../miniprogram_npm/vant-weapp/button/index"

}

}

然后就可以在WXML文件里直接使用

微信小程序正确引入Vant Weapp_第3张图片

以上就是我的使用心得,第一次写文,希望能给大家带来帮助,如果有问题也希望大家指正。

 

你可能感兴趣的:(小程序)