集成进第三方的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. 如何给 mongodb 设置密码

    言简意赅,步骤如下: 连接mongo          mongo 进入admin数据库    use admin 创建管理员账户db.createUser({ user: "adminNa ...

  2. 搭建微信小程序服务

    准备域名和证书 任务时间:20min ~ 40min 小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书. 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可 ...

  3. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  4. VM10虚拟机安装图解

    支持32位windows操作系统和64位操作系统的VM10虚拟机 ============= 下载虚拟机: VM10虚拟机下载网址+Vm10的激活秘钥  https://jingyan.baidu.c ...

  5. Python爬虫-pyspider框架的使用

      pyspider 是一个用python实现的功能强大的网络爬虫系统,能在浏览器界面上进行脚本的编写,功能的调度和爬取结果的实时查看,后端使用常用的数据库进行爬取结果的存储,还能定时设置任务与任务优 ...

  6. TestNG教程网站

    比较简明的一些TestNG教程网站 : https://www.jianshu.com/p/74816a200221 http://www.yiibai.com/testng/parameterize ...

  7. ConcurrentHashMap简介

    ConcurrentHashMap为了高并发而设计,相比于HashTable和HashMap有更多优势.HashTable是同步的,在多线程环境下,能保证程序执行的正确性,每次同步执行的时候都要锁住整 ...

  8. SDOI2017 BZOJ 4820 硬币游戏 解题报告

    写在前面 此题网上存在大量题解,但本人太菜了,看了不下10篇均未看懂,只好自己冷静分析了.本文将严格详细地论述算法(避免一切意会和玄学),因此可能会比其它题解更加理论化一些,希望能对像我一样看了其它题 ...

  9. 解决linux netcore https请求使用自签名证书忽略安全检查方法

    当前系统环境:centos7 x64. dotnet 2.0. 不管是 ServicePointManager.ServerCertificateValidationCallback = (a, b, ...

  10. 基于Unity的AR开发初探:发布AR应用到Android平台

    本文接上一篇,介绍一下如何通过Unity发布第一个AR应用至Android平台,在Android手机上使用我们的第一个AR应用. 一.一些准备工作 1.1 准备Java JDK 这里选择的是JDK 1 ...