集成进第三方的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. ES创建mapping时字段别名

    ES默认是动态创建索引和索引类型的mapping的,但是在学习的时候还能这样用,在生产中一定是手动制定mapping!在生产中经常会遇到这样的需求,想用某个字段进行统计,又想对该字段进行模糊查询,解决 ...

  2. ORA-12737: Instant Client Light: unsupported server character set CHS16GBK

    当使用Navicat Premiun 英文版连接oracl时可能会报ORA-12737: Instant Client Light: unsupported server character set ...

  3. Android TagFlowLayout完全解析 一款针对Tag的布局

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/48393217: 本文出自:[张鸿洋的博客] 一.概述 本文之前,先提一下关于上 ...

  4. Android 打造任意层级树形控件 考验你的数据结构和设计

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40212367,本文出自:[张鸿洋的博客] 1.概述 大家在项目中或多或少的可能会 ...

  5. APP内置react 应用与APP的交互问题

    一.内置的H5应用唤起(返回)app 可以用 intent url 来唤起,但要求 webview 实现 shouldOverrideUrlLoading() ,解析 uri,找到对应的 activi ...

  6. LuoguP4234_最小差值生成树_LCT

    LuoguP4234_最小差值生成树_LCT 题意: 给出一个无向图,求最大的边权减最小的边权最小的一棵生成树. 分析: 可以把边权从大到小排序,然后类似魔法森林那样插入. 如果两点不连通,直接连上, ...

  7. 虚拟机console基础环境部署——配置本地YUM源

    1. CD/ROM装载系统镜像2. 挂载设备3. 配置本地源4. 总结 有关YUM源及Linux系统三大软件管理方式,参照博客<CentOS系统三大软件管理>,笔记内链:CentOS系统三 ...

  8. openoffice excel word 转换pdf 支持本地调用和远程调用

    OpenOffice.org 是一套跨平台的办公室软件套件,能在Windows.Linux.MacOS X (X11)和 Solaris 等操作系统上执行.它与各个主要的办公室软件套件兼容.OpenO ...

  9. SpringBoot(三)_controller的使用

    针对controller 中 如何使用注解进行解析 @RestController 返回数据类型为 Json 字符串,特别适合我们给其他系统提供接口时使用. @RequestMapping (1) 不 ...

  10. MIP ACCESS细节剖析

    什么是 MIP ACCESS MIP ACCESS 由百度 MIP 团队开发的一种页面访问权限控制机制,能够允许网页发布者在页面元素中定义内容标记,并结合用户访问情况进行综合评价,从而展现或隐藏页面中 ...