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"
}
  1. 使用组件,引入组件后可以下wxml中使用。
// index.wxml
 默认按钮
 主要按钮
  1. 页面正常显示即引入成功。


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

你可能感兴趣的:(npm构建vant/weapp小程序流程)