微信小程序项目使用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://www.cnblogs.com/Jason1995/p/10890900.html

微信小程序项目使用npm安装vant-weapp的正确步骤，简单易懂！！相关推荐

【微信小程序】-- 使用 npm 包 - Vant Weapp（四十一）
筱筱看博客（微信小程序、Lin-ui组件、vant Weapp）
今日分享 1.微信小程序我是使用微信开发者工具做的小demo.首先呢!我写了一个简单的for.点击事件. for 循环.点击的事件小demo. for 循环的案列,如下: 点击事件的案列,如下: 2 ...
【微信小程序】原生微信小程序ts模板下引入vant weapp
之前一直是在普通项目下使用 vant weapp,这不最近学了ts,使用微信开发工具的ts+less初始化项目,再引入 vant 时踩了好久坑,特来记录一下前言本文章适合微信开发工具的ts项目,指 ...
开始创建第一个npm的微信小程序项目
微信小程序-第一个npm项目创建简单的创建方式 1.微信开发工具正常流程新建小程序 2.在根目录添加package.json文件 {"name": "master_we ...
微信小程序开发工具npm用不了，报错“npm不是内部或外部命令,也不是可运行的程序”
微信小程序开发工具npm用不了,报"npm不是内部或外部命令,也不是可运行的程序"错时. 1.首先查看是否下载了Node.js.如果没有下载下载一个,最新版本的已经添加了环境变量, ...
微信小程序项目转uniapp踩坑日记
本文目录一.前言二.转换方式三.后语四.其他:node报错 1.包默认C盘存放,而不是安装目录E盘 2.正确的环境变量添加 3.npm install 命令报错 4.npm install - ...
微信小程序怎么构建npm？
作者:陈业贵华为云享专家 51cto(专家博主明日之星 TOP红人) 阿里云专家博主文章目录前言为什么需要构建npm? 一.npm是什么? 二.使用步骤第一步:安装node.js最新版本( ...
微信小程序项目开发实战：用WePY、mpvue、Taro打造高效的小程序》（笔记4）支持React.js语法的Taro框架
Taro的编写代码方式和mpvue.WePY框架最大的一个差别就是,Taro并不是基于Vue.js的语法规范,而是遵循React语法规范,它采用与React一致的组件化思想,组件生命周期与React保 ...
【微信小程序】使用npm并引入vant-weapp组件库
0 前言 vant文档与微信小程序文档写得弯弯绕绕,你引用我,我引用你,还给出了多种不同情况下的选项,甚至有步骤缺失,导致踩了一点小坑,浪费了一些没必要的时间,这里给出完整可行的实现方法,以供参考. ...

微信小程序项目使用npm安装vant-weapp的正确步骤，简单易懂！！

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

微信小程序项目使用npm安装vant-weapp的正确步骤，简单易懂！！相关推荐

最新文章

热门文章