uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

时间:2024-11-11 20:07:44

uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

1. 新建相关目录

  • 根目录下创建 wxcomponents

  • wxcomponents下新建vant目录

  • 创建完成后的目录结构

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

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

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

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

3. 页面中使用引入的UI组件

  1. 在App.Vue文件中style部分引入UI组件库的 样式文件

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
@import "/wxcomponents/vant/dist/common/index.wxss";
  1. 在pages.json配置文件中,注册页面需要的组件
{
"path": "pages/index/index",
"style": {
"usingComponents":{
"van-button": "/wxcomponents/vant/dist/button/index"
},
"navigationBarTitleText": "首页"
}
}

uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤