集成进第三方的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-Security-OAuth2调用微信API

    import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.an ...

  2. 页面获取Spring Security登录用户

    1.在session中取得spring security的登录用户名如下:${session.SPRING_SECURITY_CONTEXT.authentication.principal.user ...

  3. Hibernate中cascade作用

    Hibernate中cascade作用 只有“关系标记”才有cascade属性: 一个操作因级联cascade可能触发多个关联操作.前一个操作叫“主控操作”,后一个操作叫“关联操作”. cascade ...

  4. guid.go

    ] = byte(g)     hex.Encode(h[:], b[:])     return h }

  5. 打包前端WebSite到Go程序

    打包前端WebSite到Go程序 Coolpy5发布在即,新版本要求服务端程序只是一个运行文件,经历了go的template无数坑后,最后还是放弃了,所以还是要把前端独立开发一个纯前端程序,但是go程 ...

  6. linux学习笔记基础篇（一）

    一.IP操作 1.临时修改IP ,执行命令  ifconfig  网卡名称  新ip :例如 ifconfg  nescc 192.168.1.110 ,重启失效 2.重启网络 ,执行命令 syste ...

  7. docker环境部署

    docker环境部署 1 查看当前系统版本 只支持CentOS7版本的系统,如果不是的话,可以让项目方进行重装或者系统内核升级. [root@bogon bin]# cat /etc/redhat-r ...

  8. 危险 AI 花名册

    简评:臭不要脸 AI 名单,another side of AI. 这是一个可怕的 AI 清单,上面的各种商用 AI 项目都用于一些很恶劣的目的.请大家保持警惕. 区别对待类 · HireVue - ...

  9. Robot Framework源码解析(2) - 执行测试的入口点

    我们再来看 src/robot/run.py 的工作原理.摘录部分代码: from robot.conf import RobotSettings from robot.model import Mo ...

  10. vue笔记 递归组件的使用

    递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...