微信小程序使用Vant Weapp组件库的方法步骤

 更新时间:2019年08月01日 16:13:37   作者:直男程序员的钢铁之路  
这篇文章主要给大家介绍了关于微信小程序使用Vant Weapp组件库的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧


地址:https://youzan.github.io/vant/#/zh-CN/intro

一.引入Vant组件库

1.首先运行 npm init

就会生成 package.json

2.运行

npm i vant-weapp -S --production

 

 

3.安装成功后 点击 工具 => 构建npm

之后点击 详情 => 使用构建npm 渲染

二.使用组件库

首先在json文件中引入组件

"van-button": "vant-weapp/button"

之后可以在官网找到想要用的组件使用

 

 

报错码

VM292:1 thirdScriptError sdk uncaught third Error module "miniprogram_npm/vant-weapp/mixins/transition" is not defined Error: module "miniprogram_npm/vant-weapp/mixins/transition" is not defined at require (http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26700) at http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26448 at http://127.0.0.1:56368/appservice/miniprogram_npm/vant-weapp/popup/index.js:5:19 at require (http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26841) at <anonymous>:395:7 at HTMLScriptElement.scriptLoaded (http://127.0.0.1:56368/appservice/appservice?t=1557802464868:4544:21) at HTMLScriptElement.script.onload (http://127.0.0.1:56368/appservice/appservice?t=1557802464868:4556:20) 

解决方法:

你只需要把miniprogram_npm/vant-weapp里的组件文件夹都删除,

之后再https://github.com/youzan/vant-weapp下载一份vant, 将dist文件夹(vant-weapp-dev\vant-weapp-dev\dist)中的文件复制到项目的miniprogram_npm/vant-weapp

即下载一份vant,之后替换掉项目中的文件

之后保存解决


总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

相关文章

  • 一文详解JavaScript中的事件循环(event loop)机制

    一文详解JavaScript中的事件循环(event loop)机制

    JavaScript中的事件循环(Event Loop)是一种重要的机制,用于管理异步代码的执行,它确保 JavaScript 单线程环境中的任务按照正确的顺序执行,同时允许异步操作如定时器、网络请求和事件处理,本将给大家详细的介绍一下JavaScript事件循环机制,感兴趣的朋友可以参考下
    2023-12-12
  • JavaScript 对象的四种方式比较详解

    JavaScript 对象的四种方式比较详解

    本文主要介绍了JavaScript 对象的四种方式比较详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • JavaScript实现图像模糊化的方法实例

    JavaScript实现图像模糊化的方法实例

    这篇文章主要介绍了JavaScript实现图像模糊化的方法,文中先进行简单介绍,而后给出了完整的实例代码,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • 微信小程序js文件改变参数并在视图上及时更新【推荐】

    微信小程序js文件改变参数并在视图上及时更新【推荐】

    这篇文章主要介绍了微信小程序js文件改变参数并在视图上及时更新的实现代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-06-06
  • CocosCreator怎样使用cc.follow进行镜头跟随

    CocosCreator怎样使用cc.follow进行镜头跟随

    这篇文章主要介绍了CocosCreator怎样使用cc.follow进行镜头跟随,想要学习follow的同学,一定要看一下
    2021-04-04
  • 禁止按回车键提交表单的方法

    禁止按回车键提交表单的方法

    这篇文章主要介绍了禁止按回车键提交表单的方法的相关资料,需要的朋友可以参考下
    2015-06-06
  • javascript实现鼠标放上后下边对应内容变换的效果

    javascript实现鼠标放上后下边对应内容变换的效果

    这篇文章主要介绍了javascript鼠标放上后下边对应内容变换的方法,实例分析了javascript实现tab切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • Bootstrap基础学习

    Bootstrap基础学习

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了流行的浏览器技术,给web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。
    2015-06-06
  • JavaScript简单拖拽效果(1)

    JavaScript简单拖拽效果(1)

    这篇文章主要为大家详细介绍了JavaScript简单拖拽效果 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • javascript解三阶幻方(九宫格)

    javascript解三阶幻方(九宫格)

    本文给大家分享的是使用javascript实现解答九宫格问题的算法,非常的简单实用,有需要的小伙伴可以参考下。
    2015-04-04

最新评论