uniapp搭配vant-weapp开发微信小程序

350 阅读1分钟

1、hbuilder新建一个vue2的项目

2、项目中引入vant-weapp组件

image.png

  • vant-weapp的GitHub Releases版块下载最新的zip包
  • 解压下载文件,将dist目录下面的文件拷贝到刚才创建vant目录中

3、在App.vue引入组件库样式

@import "/wxcomponents/vant/common/index.wxss"; image.png

4、在pages.json里面注册组件

    "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "usingComponents": {
            "van-button": "/wxcomponents/vant/button/index"//按需引入组件

    }
    },
    //easycom配置
    "easycom": {
            "autoscan": true,
            "custom": {
                    "van-(.*)": "@/wxcomponents/vant/$1/index"
            }
    },

image.png

5、单个页面按需引入组件     

{
    "path": "pages/index/index",
    "style": {
        "usingComponents":{
            "van-button": "/wxcomponents/vant/button/index"
        },
        "navigationBarTitleText": "首页"
    }
}