微信小程序引用vant ui

一、 微信小程序空白地方右键 → 在外部终端窗口打开

二、 通过 npm 安装

?

1 2	npm init npm i @vant/weapp -S --production

　　

三、 修改 project.config.json

?

1 2 3 4 5 6 7 8 9 10 11 12 13

{   ...   "setting": {     ...     "packNpmManually": true,     "packNpmRelationList": [       {         "packageJsonPath": "./package.json",         "miniprogramNpmDistDir": "./miniprogram/"       }     ]   } }

 

四、 构建 npm 包

打开微信开发者工具，点击 工具 -- 构建 npm，构建完成后，可引入组件

 

 

五、 引入组件

以 button 组件为例，在app.json或index.json中配置 button 对应的路径即可

?

1 2 3 4 5 6 7 8 9

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

　　

六、 使用组件

?

1	<van-button type="primary">van按钮</van-button>