npm构建vant/weapp小程序流程

1. 打开小程序开发工具，创建新的小程序项目 applet-project

2. 在项目文件夹下初始化 package.json 文件

npm init

3. 安装 @vant/weapp

npm i @vant/weapp -S --production

4. 在微信开发工具中配置 npm模块

Snipaste_2021-10-27_13-12-40.jpg

5. 点击微信开发工具顶部 工具 =>> 构建npm

Snipaste_2021-10-27_13-15-40.jpg

• 完成上述步骤即可在项目中引入所需要的组件

组件使用步骤：

使用前按照官网说法需要进行如下配置：

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

1. 引入组件，只需要在app.json(全局引入)或index.json中引入需要的组件即可。

• 以 Button 组件为例

 // app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

2. 使用组件，引入组件后可以下wxml中使用。

// index.wxml
 <van-button type="default">默认按钮</van-button>
 <van-button type="primary">主要按钮</van-button>

3. 页面正常显示即引入成功。

   
   
   Snipaste_2021-10-27_13-42-39.jpg