uni-app中引入vant - 前端笔记-支持,小程序 ,app, 不支持h5 以测试 1. 新建相关目录 根目录下创建 wxcomponents wxcomponents下新建vant目录 ...

学习笔记

点滴记忆
回忆过往
首页>> web前端 >>uni-app中引入vant - 前端笔记
2020-3-12
分类: web前端

uni-app中引入vant

文章作者:痴迷

支持,小程序 ,app,        不支持h5 以测试 1. 新建相关目录 根目录下创建 wxcomponents wxc......

支持,小程序 ,app,        不支持h5 以测试

1. 新建相关目录

  • 根目录下创建 wxcomponents
  • wxcomponents下新建vant目录
  • 创建完成后的目录结构

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

  •  npm 一下  可以下载最新的 vant-weapp
    npm i vant-weapp -S --production
  • 解压下载文件,将dist目录拷贝到刚才创建vant目录中

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

    1.pages.json 引入 
{
  "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    {
      "path""pages/index/index",
      "style": {
        "navigationBarTitleText""uni-app",
        "usingComponents": {
          "van-button""/wxcomponents/vant/button/index"
        }
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText""uni-app",
    "navigationBarBackgroundColor""#F8F8F8",
    "backgroundColor""#F8F8F8"
  }
  
}

    2.页面中引入


<template>
  <view class="meun">
    <van-button type="primary">主要按钮</van-button>
  </view>
</template>;



×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » uni-app中引入vant

网友评论(0)