小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp
Github源码:https://github.com/youzan/vant-weapp
中文文档:https://youzan.github.io/vant-weapp/#/intro
1、新建一个项目,打开微信开发者工具,填写自己的appid和项目名称,选择不使用云服务。
2、在微信开发者工具中打开终端,进入当前项目根目录;
3、通过npm安装
第一步:npm init
第二步:npm install --production
第三步: npm i @vant/weapp -S --production
或者 npm i vant-weapp -S --production
注意:安装方式不同,在引用van-weapp方式也会有区别
使用 npm i vant-weapp -S --production安装
引入方式:在app.json或index.json中引入组件,需要使用这样的路径
{
"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
}
}
使用 npm i @vant/weapp -S --production 安装
引入方式:在app.json或index.json中引入组件,需要使用这样的路径
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
4、构建npm,点击工具里面 -->构建npm,在微信开发工具执行npm 构建,如下图;
完成构建后,会在目录下出现一个miniprogram_npm文件夹,就构建完了,可以使用vant-weapp组件库了;