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

清疚 2022-11-26 15:56 308阅读 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 条评论，308人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 api 微信小程序组件库colorui_8个最热门的微信小程序 UI 组件库

大家在开发微信小程序的过程中，选择一款高大上且好用的UI组件库，可以达到事半功倍的效果。目前，网上已有不少开源的小程序 UI组件库，但选择太多往往让人眼花缭乱，纠结，下面小编就

绝地灬酷狼/ 2023年01月10日 05:18/ 0 赞/ 159 阅读

相关小程序组件库ColorUI教程

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

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

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

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

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

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

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

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

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

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

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

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

1. 创建目录在项目根目录中创建wxcomponents目录在wxcomponents目录中创建vant目录 ![在这里插入图片描述][202

梦里梦外;/ 2021年09月13日 15:56/ 0 赞/ 1228 阅读

相关小程序——colorUI库初识

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

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