微信小程序入门【一】：安装VantUI组件库

一、通过npm安装

 

1、初始化

npm init

 

2、安装npm包

npm install

 

3、安装vantUI

npm i @vant/weapp -S --production

 

二、将 app.json 中的 "style": "v2" 去除

 

三、修改project.config.json

{

  "setting": {

    "packNpmManually": true,

    "packNpmRelationList": [

      {

        "packageJsonPath": "./package.json",

        "miniprogramNpmDistDir": "./miniprogram/"

      }

    ]
}

 

四：打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项

 

大功告成！

 

 

五：简单举例

在app.json或index.json中引入组件

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

 在index.wxml增加控件

<van-button plain type="info" >朴素按钮</van-button>

效果图预览

 

参考链接：Vant Weapp快速上手