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. thinkphp3.2.3 nginx 连接mysql 报错 new PDO 异常

    在 php.ini 里重新指定mysql.sock 路径 pdo_mysql.default_socket=/Applications/XAMPP/xamppfiles/var/mysql/mysql ...

  2. 如何快速合并多个TXT文本内容

    工作中有时候需要合并很多文本内容,例如一些推送清单之类,一个一个打开去复制粘贴的话,少量还行,如果txt文本数据量大(10+M以上)且文件数量多(成百上千),这种方式就显得很低效了.具体要求如下:   ...

  3. 设置编辑工具UltraEdit的背景色为护眼颜色

    1.视图--->主题--->管理主题---> 2.--->编辑器--->纯文本--->第二个框(背景色) 3.--->规定自定义颜色--->建议(色调: ...

  4. P4860 Roy&October之取石子II

    4的倍数不行,之间的数都可以到4的倍数,而6的倍数不能到4的倍数 #include <iostream> #include <cstdio> #include <queu ...

  5. Python 的一些方法

    有关 Python 内编写类的各种技巧和方法(构建和初始化.重载操作符.类描述.属性访问控制.自定义序列.反射机制.可调用对象.上下文管理.构建描述符对象.Pickling). 你可以把它当作一个教程 ...

  6. 简单搭建 @vue-cli3.0 及常用sass使用

    1,在安装了Node.js后使用其中自带的包管理工具npm.或者使用淘宝镜像cnpm(这里不做说明) 1-1,下载vue3.0脚手架(如果之前装vue-cli3x之前的版本,先卸载 npm unins ...

  7. cache方法用于查询缓存操作，也是连贯操作方法之一。

    cache方法用于查询缓存操作,也是连贯操作方法之一. cache可以用于select.find和getField方法,以及其衍生方法,使用cache方法后,在缓存有效期之内不会再次进行数据库查询操作 ...

  8. centos6 nginx 配置本地https访问

    安装准备 yum install openssl openssl-devel 生成文件 cd /usr/local/nginx/conf # 生成密钥privkey.pem: openssl genr ...

  9. Windows Server 2008 R2 部署服务

    Windows Server 2008 R2 部署服务 部分参考: Windows Server 2008 R2 部署服务 - 马睿的技术博客 - 51CTO技术博客http://marui.blog ...

  10. C#用API可以改程序名字

    [DllImport("user32.dll", EntryPoint = "FindWindow")] public static extern int Fi ...