微信小程序引入vant Weapp组件

微信小程序引入vant Weapp组件

步骤:

1. 打开终端:

先初始化:

npm init -y     

然后进行安装

npm install --production
 npm i @vant/weapp -S --production

2. 需要在微信开发者工具,点击工具==>>构建npm

并点击详情,勾选 使用 npm 模块 选项,构建完成后,即可引入组件
在这里插入图片描述

3. 将组建从nodemodel 里面拎出来

在这里插入图片描述

4.引入组件

在你需要使用的子页面的 .json文件当中根据你的具体路径来引用 (好像只有相对路径可以引用)

{
  "usingComponents": {
    "van-tabbar": "../weapp/dist/tabbar",
    "van-tabbar-item": "../weapp/dist/tabbar-item/index"
  }
}

热门文章

暂无图片
编程学习 ·

css实现瀑布流

一行代码实现瀑布流css 的 column-count 属性,将一个盒子分成 x 列,例如 column-count: 2; ,就是将一个div分成 2 列但是排列不是按照数组顺序排序,因为分成2列后是按照顺序从上往下排列,会自动计算,第一列按照数组顺序渲染完才接着渲染第二列,无关紧要 <template>…
暂无图片
编程学习 ·

element dom 事件注册 on off once

/* istanbul ignore next */ // 匿名函数自执行,兼容IE-attachEvent,chrome-addEventListener export const on = (function() {if (!isServer && document.addEventListener) {return function(element, event, handler) {if (element && event && h…
暂无图片
编程学习 ·

微信小程序--修改switch组件的大小

修改switch组件的大小 小程序中switch组件的大小往往和实际项目中的大小有些出入,但是发现文档中并没有修改大小的方法,但是可以根据自己的实际情况进行颜色设置。 直接上代码: <switch checked>正常开关</switch> <switch checked style="transform:sc…
暂无图片
编程学习 ·

Spring学习笔记(一):工厂模式

Spring学习笔记一:工厂模式1.简介2.工厂模式简单工厂设计通⽤⼯⼚的设计通用工厂的使用方式 1.简介 1.Spring是⼀个轻量级的 JavaEE 解决⽅案,整合众多优秀的设计模式。 2.EJB(Enterprise Java Bean):重量级框架,存在问题包括:运行环境苛刻,代码移植性差。 什么是轻量级?…
暂无图片
中恒嘉业 ·

关于主从复制的超详细解析(全)

目录前言1. 主从复制1.1 方式2. Mysql的主从复制2.1 一主一从2.1.1 window和linux通讯2.1.2 linux和linux的通讯2.2 双主双从3. Redis的主从复制3.1 哨兵模式3.2 java代码结合前言 主要介绍mysql的主从复制以及redis的主从复制 能由浅入深的明白原理以及如何操作 再者&#xf…
暂无图片
郑州普通话 ·

android路由实现,flutter登录界面设计

二、Android面试知识框架三、Java 基础叩关 3.1 数据结构与算法 3.1.1 常用的数据结构有哪些?3.1.2 数组(1).如何在一个1到100的整数数组中找到丢失的数字?(2).如何在给定的整数数组中找到重复的数字? 小米(3).如何在未排序整数数组中找到最大值和最小值? 字节…
暂无图片
郑州普通话 ·

android语言基础教程,Android开发自学技巧

技术面 具体哪面问的忘了,就统一写一起了,具体的顺序也是随便写的。 Java相关String、StringBuffer、StringBuilder的比较。好,那你给我说个需要使用StringBuffer的场景(囧),还真没想出来。。。 finalize知道吧?不知道,但是我知道final和finally,好,那try catch fina…
暂无图片
代理记账 ·

在web应用中发送和接收Jakarta消息

Running the websimplemessage Example To Package and Deploy websimplemessage Using Maven _1、Make sure that GlassFish Server has been started (see Starting and Stopping GlassFish Server). _2、In a terminal window, go to: tut-install/examples/jms/websimp…
暂无图片
cgfy ·

C++学习日记2——函数、封装、对象特性

一、函数 1.1 函数默认参数 1.1.1 简介 在C中&#xff0c;函数的形参列表中的形参是可以有默认值的 1.1.2 语法 返回值类型 函数名 (参数 默认值) {} 1.1.3 代码 #include <iostream> using namespace std;// 函数的默认参数 int func(int a, int b 20, int c 30…
暂无图片
coreui ·

视频水印怎么去除?超简单 千万不要错过

小编在知乎看到很多大佬分享的视频去水印的方法&#xff0c;但是感觉都有点太复杂了&#xff0c;今天就来分享一下小编自己私藏的几个针对于视频去水印的软件和网站~建议大家收藏哦~ 1、爱给网-视频去水印小工具&#xff08;免费 在线&#xff09; 推荐点 1、在线操作&#…
暂无图片
coreui ·

Mac 安装 tomcat10

Mac 安装 tomcat10 1、下载tomcat tomcat官网&#xff1a;https://tomcat.apache.org/ 点击我下载的tomcat10&#xff1a; 2、下载解压,给bin下的*.sh文件添加可执行权限 3、修改webapps下的ROOT中的index文件查看效果
暂无图片
未来博客 ·

视频水印怎么去除?超简单 千万不要错过

小编在知乎看到很多大佬分享的视频去水印的方法&#xff0c;但是感觉都有点太复杂了&#xff0c;今天就来分享一下小编自己私藏的几个针对于视频去水印的软件和网站~建议大家收藏哦~ 1、爱给网-视频去水印小工具&#xff08;免费 在线&#xff09; 推荐点 1、在线操作&#…
暂无图片
未来博客 ·

Mac 安装 tomcat10

Mac 安装 tomcat10 1、下载tomcat tomcat官网&#xff1a;https://tomcat.apache.org/ 点击我下载的tomcat10&#xff1a; 2、下载解压,给bin下的*.sh文件添加可执行权限 3、修改webapps下的ROOT中的index文件查看效果
暂无图片
建站日记 ·

惠州实验室建设选址、勘察事项

惠州实验室建设选址、勘察事项&#xff0c;SICOLAB技术员带您从实验室建设启动前思考问题考虑如下&#xff1a;一、不同实验室建设选址要求 1.化学实验室 &#xff08;1&#xff09;清洁安静环境 &#xff08;2&#xff09;远离住宅、生活区 &#xff08;3&#xff09;锅炉房与…
暂无图片
建站日记 ·

NLP聊天机器人原理(seq2seq模型)

一、seq2seq模型 1.概念 seq2seq是一个Encoder-Decoder结构的网络&#xff0c;它的输入是一个序列&#xff0c;输出也是一个序列。Encoder中将一个可变长度的信号序列变为固定长度的向量表达&#xff0c;Decoder将这个固定长度的向量变成可变长度的目标的信号序列。这个结构最…
暂无图片
mfbz ·

惠州实验室建设选址、勘察事项

惠州实验室建设选址、勘察事项&#xff0c;SICOLAB技术员带您从实验室建设启动前思考问题考虑如下&#xff1a;一、不同实验室建设选址要求 1.化学实验室 &#xff08;1&#xff09;清洁安静环境 &#xff08;2&#xff09;远离住宅、生活区 &#xff08;3&#xff09;锅炉房与…
暂无图片
mfbz ·

全渠道会员通-天猫会员通3: 会员运营内容准备

在天猫会员通技术对接开发过程中&#xff0c;为了通知存量会员的通知工作&#xff0c;发挥会员通的优势&#xff0c;品牌需要做好以下事宜&#xff1a; 会员体系暂停公告&#xff1a;因会员通技术升级期间&#xff0c;会员服务将被暂停&#xff0c;店铺tab中会员入口将被下线&…
暂无图片
珊珊日记 ·

C# 执行Javascript脚本

c#教程https://www.xin3721.com/eschool/CSharpxin3721/ 前一阵子使用C#编写SCXML状态机&#xff0c;需要解析EMCScript表达式&#xff0c;使用了Jint库&#xff08;https://github.com/sebastienros/jint/)&#xff0c;当时感觉与C#之间的数据转换不是很方便。这两天有时间又关…
暂无图片
珊珊日记 ·

第九届“图灵杯”NEUQ-ACM程序设计竞赛个人赛

A.大学期末现状 题目描述 作为一名大学生的你&#xff0c;现在又到了期末查成绩的时候&#xff0c;当你的成绩大于等于60时请输出“jige,haoye!”,否则输出"laoshi,caicai,laolao"。 输入描述: 一行&#xff0c;一个整数x代表你的成绩&#xff08;0<x<100&a…