小程序开发使用vant ui 组件快速开发

小程序开发使用vant ui 组件快速开发

1 通过 npm 安装 vant
npm i @vant/weapp -S --production

2.修改 app.json,
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3. 修改project.config.json 配置文件,添加配置项
   "setting": {
   "packNpmManually":true,
   "packNpmRelationList": [
   {
   "packageJsonPath": "./package",
   "miniprogramNpmDistDir": "./"
   }
   ],
   }

4.构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

5.使用组件：在app.json 引用组件，全局所有页面有效；在在index.json 引用组件，单页面有效，

{
"usingComponents": {}
}

{
"navigationBarTitleText": "商品详情",
"usingComponents": {
"van-button": "/vant/weapp/dist/button/index",
"van-image": "/vant/weapp/dist/image/index",
"van-tag":"/vant/weapp/dist/tag/index",
"van-cell": "/vant/weapp/dist/cell/index",
"van-cell-group": "/vant/weapp/dist/cell-group/index",
"van-goods-action": "/vant/weapp/dist/goods-action/index",
"van-goods-action-icon": "/vant/weapp/dist/goods-action-icon/index",
"van-goods-action-button": "/vant/weapp/dist/goods-action-button/index",
"van-row": "/vant/weapp/dist/row/index",
"van-col": "/vant/weapp/dist/col/index",
"van-icon": "/vant/weapp/dist/icon/index",
"van-popup": "/vant/weapp/dist/popup/index",
"van-toast": "/vant/weapp/dist/toast/index",
"van-calendar": "/vant/weapp/dist/calendar/index",
"van-cascader": "/vant/weapp/dist/cascader/index",
"van-uploader": "/vant/weapp/dist/uploader/index",
"van-card": "/vant/weapp/dist/card/index",
"van-goods-action": "/vant/weapp/dist/goods-action/index",
"van-goods-action-icon": "/vant/weapp/dist/goods-action-icon/index",
"van-goods-action-button": "/vant/weapp/dist/goods-action-button/index",
"van-grid": "/vant/weapp/dist/grid/index",
"van-grid-item": "/vant/weapp/dist/grid-item/index",
"van-tab": "/vant/weapp/dist/tab/index",
"van-tabs": "/vant/weapp/dist/tabs/index",
"van-tree-select": "/vant/weapp/dist/tree-select/index",
"van-config-provider": "/vant/weapp/dist/config-provider/index"
}
}

https://vant-ui.github.io/vant-weapp/#/quickstart#bu-zou-san-gou-jian-npm-bao