集成进第三方的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. 关于js中对象和函数的一道问题

    今天在写代码的时候遇到一个问题,没有解决,又在sf上提问了..冏..,最后讨论良久终于解决,和往常一样,做一个备忘,最近打算把印象笔记里的东西迁来.具体可访问http://segmentfault.c ...

  2. app后端设计(3)--短信，邮件，推送服务（2014.12.05更新）

    在app的后端设计中,免不了消息的推送,短信,邮件等服务,下面就个人的开发经验谈谈这方面. (1)最重要的是,各种推送一定要放在队列系统中处理,不然会严重影响api的响应时间. (2)短信方面 以前我 ...

  3. 10. 搭配redis做文章缓存

    redis是一个使用较多的内存键值数据库,这儿的键是字符串类型的标识符,而值可以是字符串.散列.列表.集合和有序集合,也正是因为redis提供了较丰富的值的类型,能够满足不同的使用要求,而且redis ...

  4. CSS float:right 在IE浏览器下换行

    在换行的html标签内加如下样式 style="right: 0px; position: absolute;"

  5. too many open files linux服务器 golang java

    1. 现象 服务的cpu跑满(golang实现), 并大量报too many open files错误.服务使用systemd来运行,部署在阿里ecs上. 2.分析 从日志来看,cpu的上升主要为到达 ...

  6. UOJ#37. 【清华集训2014】主旋律

    题目大意: 传送门 题解: 神题……Orz. 首先正难则反. 设$f_S$表示选取点集状态为s时,这部分图可以构成非强联通图的方案数. 设$p_{S,i}$表示点集s缩点后有i个入度为0点的方案数,保 ...

  7. BZOJ_1654_[Usaco2007 Open]City Horizon 城市地平线_扫描线

    BZOJ_1654_[Usaco2007 Open]City Horizon 城市地平线_扫描线 Description N个矩形块,交求面积并. Input * Line 1: A single i ...

  8. 对于zuul服务网关框架资料整理

    本次博客只是整理了一些 看过的博客.源码等 zuul入门(1)zuul 的概念和原理 https://www.cnblogs.com/lexiaofei/p/7080257.html 深入理解Zuul ...

  9. Hibernate-ORM:02.Hibernate增删改入门案例

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本笔者使用的是Idea+mysql+maven做Hibernate的博客,本篇及其以后都是如此! 首先写好思路 ...

  10. Android--app性能问题的总结（一）

     一个应用程序的性能问题体现在很多方面,app的性能问题,很大程度上决定了使用app的用户量,如果正在使用app的过程中出现app崩溃.卡顿半天加载不出数据(跟网络也有一定的关系).用户请求事件半天获 ...