微信小程序引入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 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
jquery实现拖动效果
Aug 10 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
Vue中component标签解决项目组件化操作
Sep 04 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 foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php中strtotime函数用法详解
2014/11/15 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
python学习数据结构实例代码
2015/05/11 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技