uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

1. 新建相关目录

  • 根目录下创建 wxcomponents

  • wxcomponents下新建vant目录

  • 创建完成后的目录结构

2. 项目中引入vant-weapp组件

  • 在vant-weapp的GitHub Releases版块下载最新的zip包
  • 解压下载文件,将dist目录拷贝到刚才创建vant目录中

3. 页面中使用引入的UI组件

  1. 在App.Vue文件中style部分引入UI组件库的 样式文件

@import "/wxcomponents/vant/dist/common/index.wxss";
  1. 在pages.json配置文件中,注册页面需要的组件
{

	"path": "pages/index/index",

	"style": {

		"usingComponents":{

			"van-button": "/wxcomponents/vant/dist/button/index"

		},

		"navigationBarTitleText": "首页"

	}

}



uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤的更多相关文章

  1. 微信小程序引入ECharts组件

    首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8 ...

  2. 微信小程序引入外部组件 iView Weapp

    iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址 ...

  3. 小程序开发-6个优秀的UI组件库

    微信小程序开发,当原生的控件不能满足我们时,可以尝试下面几个比较优秀的组件库. 1. WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. ...

  4. 使用uView UI+UniApp开发微信小程序

    在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...

  5. 使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转

    在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔 ...

  6. 使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统

    在前面随笔<使用uView UI+UniApp开发微信小程序>和<使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转>介绍了微信小程序的常规登录处理和验 ...

  7. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

  8. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  9. Taro开发微信小程序的初体验

    了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...

随机推荐

  1. Caffe系列4——基于Caffe的MNIST数据集训练与测试（手把手教你使用Lenet识别手写字体）

    基于Caffe的MNIST数据集训练与测试 原创:转载请注明https://www.cnblogs.com/xiaoboge/p/10688926.html  摘要 在前面的博文中,我详细介绍了Caf ...

  2. 关于Cadence SPB 16.6 破解的一些关键步骤

    网上搜索到的破解方法,一般来说流程都是没有什么大问题的.较详细的一个破解流程可参照: http://www.mr-wu.cn/cadence-orcad-allegro-spb-16-6-instal ...

  3. vue-draggable-resizable 拖拽缩放插件

    安装: npm install --save vue-draggable-resizable 使用: <template>   <div style="height: 50 ...

  4. 0817NOIP模拟测试赛后总结

    吐槽一句:话说NOIP都取消了还叫NOIP模拟真的好么 于是乎我再次爆炸……(0+20+50=70 rank26) 赛时状态 赛时的状态依旧不佳.不过还是硬逼着自己把三道题都读完,然后开始对出题人静坐 ...

  5. MYSQL常用命令（转）

    1.导出整个数据库mysqldump -u 用户名 -p --default-character-set=latin1 数据库名 > 导出的文件名(数据库默认编码是latin1)mysqldum ...

  6. Lintcode 翻转链表

    翻转一个链表 样例 给出一个链表1->2->3->null,这个翻转后的链表为3->2->1->null 分析: /** * Definition of ListN ...

  7. java基础之Math类

    Math类概述Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数. 成员方法 public static int abs(int a):绝对值 public static ...

  8. Python学习day43-数据库(多表关系)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  9. Oracle的UTL_FILE.FOPEN学习笔记

    Oracle提供的文件操作包UTL_FILE包中的UTL_FILE.FOPEN负责打开一个文件. UTL_FILE.FOPEN(location in varchar2, filename in va ...

  10. Luogu P3007 [USACO11JAN]大陆议会The Continental Cowngress

    P3007 [USACO11JAN]大陆议会The Continental Cowngress 题意 题意翻译 简述:给出\(n\)个法案,\(m\)头牛的意见,每头牛有两个表决格式为"支持 ...