小程序如何引入插件Vant库，ColorUI库，iView库

清疚 2022-11-26 15:56 341阅读 0赞

**1.首先需要下载**

Vant下载地址：https://github.com/swx980/Vant-Weapp.git

ColorUI下载地址：https://github.com/swx980/ColorUI-css.git

iView下载地址：https://github.com/swx980/iView-Weapp.git

如果使用npm下载的，第二步自动忽略

使用npm下载，官网有详细介绍：

Vant官网：https://youzan.github.io/vant-weapp/\#/button

ColorUI官网：https://www.color-ui.com/

iView官网：https://weapp.iviewui.com/docs/guide/start

**2.把下载的文件放在自己的项目中**

如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center]

**3.引入**

全局引入：在app.json中写入

单个页面引入：在对应页面的.json文件中写入

代码如图：

{ 
    "usingComponents": { 
        "i-icon": "../../dist/icon/index",
        "i-rate": "../../dist/rate/index",
        "i-tabs": "../../dist/tabs/index",
        "i-tab": "../../dist/tab/index",
        "i-switch": "../../dist/switch/index"
      }
    }

路径要写对哦

**4.在页面中应用**

<view class="header">
        <i-icon type="return" size="22" color="#ffffff" bindtap="back" />
        <text>确认订单</text>
        <i-icon type="addressbook" size="22" color="#ffffff" bindtap="tologin" />
        <view class="clear"></view>
    </view>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/c8ff70fa6d0b4196a7e64eb9553e9913.png

发表评论取消回复

表情：

评论列表（有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序快速引入vant-weapp组件库（适合小白）

阅读本篇文章之前，相信你已经对小程序有了很深刻的认知及了解。 * 小程序官方npm使用介绍[点击直达][Link 1] * vant-weapp组件库安装官方介...

野性酷女/ 2024年04月19日 11:17/ 0 赞/ 48 阅读

相关【小程序】Vant组件库和Promise化

目录使用 npm 包使用 npm 包 - Vant Weapp 1. 什么是 Vant Weapp 2. 安装 Vant 组件库 3. 使用 Vant 组件

冷不防/ 2024年03月30日 12:09/ 0 赞/ 83 阅读

相关 uni-app引入UI组件库(Vant-weapp)

uni-app引入UI组件库(Vant-weapp) 1. 新建相关目录根目录下创建 `wxcomponents` wxcomponents下新建`van

素颜马尾好姑娘i/ 2023年05月28日 12:57/ 0 赞/ 155 阅读

相关微信小程序引入 vant UI组件库

实现步骤： 1、首先在项目根目录下创建一个 miniprogram 文件夹 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

朱雀/ 2023年02月22日 14:58/ 0 赞/ 4 阅读

相关 ColorUI-UniApp组件库使用笔记

uniapp里面的一个UI组件库 https://ext.dcloud.net.cn/plugin?id=239 这是一款适应于H5、微信小程序、安卓、ios、支付宝的高

心已赠人/ 2023年02月13日 11:18/ 0 赞/ 16 阅读

相关小程序组件库ColorUI教程

在开发uniapp的时候，最佳的ui框架就是ColorUI，ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！

骑猪看日落/ 2022年11月28日 13:50/ 0 赞/ 2030 阅读

相关小程序如何引入插件Vant库，ColorUI库，iView库

1.首先需要下载 Vant下载地址：https://github.com/swx980/Vant-Weapp.git ColorUI下载地址：https://github.

清疚/ 2022年11月26日 15:56/ 0 赞/ 342 阅读

相关【健康云平台练习小项目开发】小程序vant组件库的引入

一、背景 > 这是本人的参与的一个省级大创项目的系统开发部分。本人于2020年暑假已开发简单的基本框架（包括vue、小程序、ssm框架（spring boot迭代）），由于各

淩亂°似流年/ 2022年11月12日 08:28/ 0 赞/ 191 阅读

相关推荐3个小程序开源组件库——Vant、iView、ColorUI

推荐3个小程序开源组件库在进行小程序开发时，经常会遇到编写组件方面的阻碍，这让我们花费大量的时间在页面以及 CSS 样式编写上。因此可以使用开源组件库，有些复杂的组件可

我会带着你远行/ 2022年03月22日 03:38/ 0 赞/ 707 阅读

相关小程序——colorUI库初识

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

桃扇骨/ 2021年07月25日 21:26/ 0 赞/ 482 阅读