微信小程序引入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屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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
php auth_http类库进行身份效验
2009/03/19 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
php设计模式小结
2013/02/15 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
django 常用orm操作详解
2017/09/13 Python
python中列表和元组的区别
2017/12/18 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
考试作弊被抓检讨书
2014/01/10 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
关于环保的演讲稿
2014/05/10 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书