微信小程序引入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 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 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
我的论坛源代码(七)
2006/10/09 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python CSV模块使用实例
2015/04/09 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python KMeans聚类问题分析
2018/02/23 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
用Python读取几十万行文本数据
2018/12/24 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
Java面向对象面试题
2016/12/26 面试题
妇女儿童发展规划实施方案
2014/03/16 职场文书
房地产推广策划方案
2014/05/19 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
期末复习计划
2015/01/19 职场文书
财务个人年度总结范文
2015/02/26 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
工作证明格式范文
2015/06/15 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS