微信小程序引入Vant组件库过程解析


Posted in Javascript onAugust 06, 2019

前期准备

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

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

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

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

npm init

微信小程序引入Vant组件库过程解析

微信小程序引入Vant组件库过程解析

项目就回产生一个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,在终端输入安装命令,点击回车:

微信小程序引入Vant组件库过程解析

npm i vant-weapp -S --production

微信小程序引入Vant组件库过程解析

3.构建npm:

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

微信小程序引入Vant组件库过程解析

4.引用和使用vant组件:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
Vue数据绑定实例写法
Aug 06 #Javascript
Vue代码整洁之去重方法整理
Aug 06 #Javascript
VUE写一个简单的表格实例
Aug 06 #Javascript
VUE前后端学习tab写法实例
Aug 06 #Javascript
Vue路由前后端设计总结
Aug 06 #Javascript
vue实现行列转换的一种方法
Aug 06 #Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 #Javascript
You might like
多重?l件?合查?(一)
2006/10/09 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php批量修改表结构实例
2017/05/24 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
javascript正则表达式总结
2016/02/29 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
详解JS函数防抖
2020/06/05 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Django中信号signals的简单使用方法
2019/07/04 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
车间统计员岗位职责
2014/01/05 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python