集成进第三方的UI框架其实很简单

这里把vant-weapp的dist目录重命名为vant-weapp放在项目根目录的static文件夹下：

在src文件夹下，即我们写vue代码的位置，正在编写的页面中添加main.json文件（vue代码编译成小程序代码时会直接使用这个文件）

{

  "usingComponents": {

    "van-button": "/static/vant-weapp/button/index"

    //这个路径是指根目录下static文件中...

  }

}

在index.vue中使用

<van-button type="default">测试按钮</van-button>

 <van-button type="primary">测试主要按钮</van-button>

 <van-button type="warning">测试警告按钮</van-button>

 <van-button type="danger">测试危险按钮</van-button>

mpvue小程序开发之 集成第三方UI框架Vant Weapp UI的更多相关文章

  1. 第一个mpvue小程序开发总结

    前言 说起小程序,其实在去年我都还只试着照着官方文档写过demo的,不过现在这家公司小程序做得比较多,我来之后也参与了几个小程序的开发了,最开始那几个是用的wepy,最近一个开始转用mpvue开发,最 ...

  2. mpvue 小程序开发之 数据埋点统计

    mpvue 小程序开发之 数据埋点统计 在开发过程中,有数据统计的需求,需要获取小程序当前页面和来源页面的数据,以及页面的停留时间 在对小程序api进行了一番研究之后,发现获取这些数据其实并不难 当前 ...

  3. mpvue小程序开发

    查阅资料,看官方文档,知道mpvue是一个使用 Vue.js 开发小程序的前端框架(美团的开源项目).框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compi ...

  4. mpvue小程序开发之 城市定位

    背景: 在进行小程序开发时,有一个定位城市的需求,下面就来讲讲怎么实现这个功能的吧 解决方案: 小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名 ...

  5. 微信小程序开发系列六：微信框架API的调用

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  6. mpvue小程序开发入门级指南

    报错指南 "Error: ERR_GET_SESSION_KEY {"code":5100,"message":"(-1)服务内部错误,请稍 ...

  7. mpvue 小程序开发爬坑汇总

    <!-- 小程序的爬坑记录 --> 1 微信小程序之动态获取元素宽高 var obj=wx.createSelectorQuery(); 2 微信小程序图片自适应 <image cl ...

  8. 小程序开发：用Taro搭建框架

    1.node环境 1) 下载 . 官方地址:https://nodejs.org/en/ 或 https://nodejs.org/zh-cn/ 2)安装. 一路next......Install.直 ...

  9. mpvue小程序开发tips（1）

    wx.setStorageSync('vipId',vipId)-----存储   wx.getStorageSync('vipId')-------读取   wx.navigateTo({ url: ...

随机推荐

  1. Spring Boot 使用 AOP 实现页面自适应

    鉴于复杂页面自适应的难度,一般会做几套模板分别适应手机.平板.电脑等设备.使用 Spring Boot 开发单体应用时,一般会使用 Thymeleaf 模板,那么可以使用 AOP 技术来实现页面自适应 ...

  2. HTTPS加密原理

    http(超文本传输协议) 一种属于应用层的协议 缺点: 通信使用明文(不加密),内容可能会被窃听 不验证通信方的身份,因此有可能遭遇伪装 无法证明报文的完整性,所以有可能已遭篡改 优点: 传输速度快 ...

  3. jQuery.on() 函数详解 【转载】

    注意事项 1:on()为指定元素的一个或多个事件绑定事件处理函数.(可传递参数) 2:从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind(). d ...

  4. Python3 requests与http.cookiejar的使用（cookie的保存与加载）

    在学习Python之余,发现Python2与Python3 有很大的变化,之前使用urllib和cookielib来保存cookie,发现很繁琐,于是改用requests.发现cookielib在3. ...

  5. dqname.go

    package nsqd func getBackendName(topicName, channelName string) string {     // backend names, for u ...

  6. bzoj5248 [2018多省省队联测]一双木棋

    直接hash+爆搜即可. #include <cstdio> #include <cstring> #include <iostream> #include < ...

  7. BZOJ_1031_[JSOI2007]字符加密Cipher_后缀数组

    BZOJ_1031_[JSOI2007]字符加密Cipher_后缀数组 Description 喜欢钻研问题的JS同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法 :把 ...

  8. BZOJ_3239_Discrete Logging_BSGS

    BZOJ_3239_Discrete Logging_BSGS 题意:Given a prime P, 2 <= P < 231, an integer B, 2 <= B < ...

  9. BZOJ_1834_[ZJOI2010]network 网络扩容_费用流

    BZOJ_1834_[ZJOI2010]network 网络扩容_费用流 题意: 给定一张有向图,每条边都有一个容量C和一个扩容费用W.这里扩容费用是指将容量扩大1所需的费用. 求:  1.在不扩容的 ...

  10. turtle文库 ——python

    本文将会为您介绍关于python--turtle库函数,学会这个库函数,会有很多让你意想不到的事情发生哦! 我也也会为你们,简单的编写几个代码,让你们看一下turtle函数的魅力 Turtle库是Py ...