微信小程序引入Vant组件库

前期准备

Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro

1.先在微信开发者工具中打开项目的终端:

然后初始化一个package.json文件:输入命令:npm init

然后一路回车默认的即可:

npm init

项目就回产生一个package.json文件:

{
  "name": "miniprogram",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.接着在vant组件库的官网上找到安装语句:

npm i vant-weapp -S --production,在终端输入安装命令,点击回车:

npm i vant-weapp -S --production

3.构建npm:

在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”,等待构建完成

4.引用和使用vant组件:

(关于如何引用和使用组件可以参考官方文档噢,很齐全)

以引用button按钮为例,官网文档中都写的特别详细了:

原文地址:https://www.cnblogs.com/ning123/p/11291640.html

时间: 2024-11-05 22:36:35

微信小程序引入Vant组件库的相关文章

微信小程序——引入Vant组件库

背景 在微信小程序开发过程中,使用第三方组件库,高效便捷的使用 步骤 安装npm 右键小程序根目录,打开终端 输入:npm init Next 安装vant组件 右键小程序根目录,打开终端 输入:npm i @vant/weapp -S --production 构建npm 使用npm模块 完成 原文地址:https://www.cnblogs.com/zuiyue_jing/p/12260245.html

微信小程序导入Vant-Weapp组件库及出错处理

微信小程序导入Vant-Weapp组件库及出错处理一.下载Node.js*链接:https://nodejs.org/en/推荐选择LST的8.0以上版本,下载安装即可,安装完成后可以进行验证cmd打开终端,输入vant-v出现对应版本即为安装成功,也可输入npm -v查看对应的npm版本 二.在微信开发工具做对应操作 链接:https://youzan.github.io/vant-weapp/#/intro 后续可根据开发指南进行操作 三.安装Vant组件库选中miniprogram文件,右

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

iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址:https://github.com/TalkingData/iview-weapp 2. 将组件库复制到工程的static目录下 下载完成后,到它的目录中寻找名为dist的目录并复制到你的工程目录下,然后给这个dist目录改个名字,比如叫iview. 3.  为需要使用自定义组件的Page进行配

微信小程序使用第三方组件库

使用vant weapp来快速构建小程序 1.首先在项目文件夹下使用npm init 生成一个package.json的配置文件 2.然后输入组件提供的快速初始化的命令 npm i vant-weapp -S --production 3.工具---构建npm 4.在最右边详情里勾选上使用npm模块 5.在需要引用组件库的页面json文件里,添加:"usingComponents": { "van-button": "/path/to/vant-weapp

微信小程序_基础组件大全

微信小程序_基础组件 微信小程序为小程序开发者提供了一系列小程序基础组件,开发者可以通过组合这些小程序基础组件进行微信小程序的快速开发. 微信小程序组件是什么?微信小程序组件怎么用? 小程序组件是视图层的基本组成单元.小程序组件自带一些功能与微信风格的样式.一个小程序组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property="value"> Content goes here ... </tagename>

微信小程序简易table组件实现

前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页面引用时,无需通过import,只需在该页面json文件下配置usingComponents属性即可.(原本想在app.json文件里配置这个属性,从此一劳永逸,但目前貌似还不支持,至少我尝试的时候还不行-.-) 思路:主要是将table的head和tbody部分的数据抽象出来,使之只需要传值就可直

微信小程序引入WeUI

WeUI 为微信小程序量身设计的UI库 一.前言 在做微信小程序的时候就想着找一个UI库,方便我们前端开发,然后查找资料,发现了这个WeUI特别适合放在微信小程序里.下面就简单的了解一下. WeUI是一套跟微信原生的视觉体验类似的一套样式库,由微信官方设计团队为微信内网页和小程序设计的,让用户视觉更加统一.包含了外卖常用标签的各种元素. 二.预览 使用微信开发者工具打开weui-wxss-master 中的dist目录. 下载地址:https://github.com/Tencent/weui-

【小程序】UI组件库

WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. GitHub地址:https://github.com/Tencent/weui-wxss iView WeApp iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本. GitHub地址:https://github.com/TalkingData/iview-weapp 文档:https://weapp.ivi

微信小程序wx.request组件的那些坑

最近在做一个教育的在线发布系统,打算用微信小程序做前端,后端用php的CI框架,这两天把CI框架的基本功能已经啃完,因为手册比较完善,所以按照逻辑走一边就通了. 反观微信小程序,帮助代码不多,对于一些没接触过前端和js开发的新手来说,很多流程和细节都会拿不准. 1.这两天遇到最大的困扰就是wx.request组件如何从php服务器端取回数据并显示在小程序界面上,这里涉及到一个通信, 因为小程序目前的机构和框架都是基于ajax异步交互的基础上的,所以要懂得小程序的数据读写功能,首先要了解ajax的