微信小程序项目使用npm安装vant-weapp的正确步骤

1、在当前小程序项目目录
npm init -y 构建npm项目

2、运行命令 npm install vant-weapp -S --production
安装完 发现在当前小程序目录下新增node_modules目录 下面有了vant-weapp组件文件夹 如下图:

3、详情里面:选中使用npm模块

4、进入微信开发工具:选择 工具 -> 构建npm

5、下面以引入button组件到某页面为例子:

在此页面的.json中配置

"usingComponents": {
"van-button": "../../miniprogram_npm/vant-weapp/button/index"
},

然后在此页码的wxml中

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

重新编译项目 发现 已经正常引用了!!

简单易懂的操作 喜欢的朋友们可以关注一下 Jason

兄弟姐妹们,点波关注吧,一起分享有趣的技术!

掘金https://juejin.cn/user/3034307824456296/posts 全部原创好文

CSDNhttps://blog.csdn.net/qq_42753705?type=lately 全部原创好文

segmentfault 思否https://segmentfault.com/u/jasonma1995/articles 全部原创好文

博客园https://www.cnblogs.com/Jason1995/ 全部原创好文

微信小程序项目使用npm安装vant-weapp的正确步骤,简单易懂!!的更多相关文章

  1. 微信小程序(二十)-UI组件(Vant Weapp)-01按装配置

    1.官网 https://vant-contrib.gitee.io/vant-weapp/#/intro https://gitee.com/vant-contrib/vant-weapp 2.按装 ...

  2. 微信小程序(二十)-UI组件(Vant Weapp)-02使用

    1.按钮使用 https://vant-contrib.gitee.io/vant-weapp/#/button 1.全局引入,在app.json中引入组件 "usingComponents ...

  3. 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

  4. 微信小程序项目转换为uni-app项目

    一.它是谁? [miniprogram-to-uniapp]转换微信小程序"项目为uni-app项目.原则上混淆过的项目,也可以进转换,因为关键字丢失,不一定会完美. 二.它的原理是什么? ...

  5. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  6. 微信小程序开发01 --- 微信小程序项目结构介绍

    一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...

  7. 高仿Readhub小程序 微信小程序项目【原】

    # News #### 项目介绍微信小程序项目涉及功能 https://gitee.com/richard1015/News https://github.com/richard1015/News 高 ...

  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  9. 微信小程序中使用 npm包管理 (保姆式教程)

    打开自己的微信小程序项目,在勾选这个选项 然后在第一次应该是失败的提示"没有找到可以构建的npm包". 在 小程序的根目录下比如我的项目如图: 右击鼠标在终端中打开. 然后输入:n ...

随机推荐

  1. HMS Core Insights第八期直播预告--创新能力解读

    [导读] 在上个月举办的HDC2021华为开发者大会上,全新登场的HMS Core 6向大家展示了包括媒体.图形.连接与通信等领域的众多全新开放能力.如仅用一部RGB摄像头的手机即可完成的3D建模,在 ...

  2. java动态编译——tools.jar问题

    笔者在学习中写了一段简单的动态编译代码,但编译一直无法通过,起初认为受路径中存在汉字影响,修改路径后仍然没有解决.最终定位错误是:Java在进行动态编译的时候需要用到tools.jar资源包,若too ...

  3. [atAGC049E]Increment Decrement

    由于每一个操作的逆操作都存在,可以看作将$a_{i}$全部变为0的代价 先考虑第一个问题,即对于确定的$a_{i}$如何处理 如果仅能用第2种操作,定义点$i$的代价为以$i$为左端点或以$i-1$为 ...

  4. [loj3156]回家路线

    令$dp[i]$表示经过第$i$条边后的最小烦躁值,有$且dp[i]=\min_{y_{j}=x_{i}且q_{j}\le p_{i}}dp[j]+f(p_{i}-q_{j})$,其中$f(x)=Ax ...

  5. Winform开发的快速、健壮、解耦的几点建议

    在Winform开发领域开发过十多年的项目中,见证着形形色色的架构和官方技术的应用,从最早类似Winform模式的WebForm技术,到接着的JQuery+界面组件,再到Asp.net Core的技术 ...

  6. littlevgl架构浅析

    一.   littlevgl有几个线程,作用是什么? 三个,主线程一个,和在主线程的hal_init函数中创建的另两个sdl线程. 主线程完成一系列初始化工作后,循环每10ms调用在lv_init函数 ...

  7. P6072 『MdOI R1』Path

    考虑我们有这样操作. 我们只要维护两点在子树内和两点在子树外的异或和即可. 前者可以类似于线段树合并的trie树合并. 后者有两种做法: 一种是把dfn序翻倍:然后子树补变成了一个区间最大异或问题,可 ...

  8. C++ and OO Num. Comp. Sci. Eng. - Part 5.

    类 class 关键字提供了一种包含机制,将数据和操作数据的方法结合到一起,作为内置类型来使用. 类可以包含私有部分,仅其成员和 friend 类访问,公有部分可以在程序中任意位置处访问. 构造函数与 ...

  9. php-fpm一个PHPFastCGI进程管理器

    PHP-FPM(FastCGI Process Manager:FastCGI进程管理器)是一个PHPFastCGI管理器,对于PHP 5.3.3之前的php来说,是一个补丁包 [1]  ,旨在将Fa ...

  10. window10快捷键 + 浏览器常用通用快捷键

    一.window10快捷键  1.win+tab   缩小版的显示出桌面打开的所有窗口,然后再结合上下左右键加enter选择想要的窗口:  如果不想选择或者保留原有显示窗口,再按win+tab  或者 ...