微信小程序 npm构建+vant-weaap安装

微信小程序:工具-npm构建

报错

在这里插入图片描述
在这里插入图片描述

解决

1、新建miniprogram文件后,直接进入到miniprogram目录,再次执行下面两个命令,然后再构建npm成功

npm init -y
npm install express(Node js后端Express开发,不使用可以不安装)
npm install

Express框架是Node.js基金会的一个项目,官方网址为http://expressjs.com。(中文网站为
http://expressjs.com/zh-cn)。它提供了对Node.js原生API比较好的封装,从而使开发者更容易的使用Node.js,并用来开发强壮的Web、移动应用,以及API的一些其他功能。开发人员还能够方便的为它开发插件和扩展,从而增加Express的能力。
(Node js后端Express开发,不使用可以不安装)

2、在project.config.json文件找到‘setting’并添加如下配置
在根目录创建一个miniprogram文件夹
将pages、utils、app、sitemap.json等和源代码相关的文件移到miniprogram文件夹下。
在这里插入图片描述

 "packNpmManually": true,//默认是false,要改成true
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json", //不一定这个位置,看package.json对应位置
        //例如    "packageJsonPath": "./miniprogram/package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

在这里插入图片描述
再安装:

  • 通过 npm 安装
  • npm i @vant/weapp -S --production

进行工具–npm 构建
构建成功,给页面引入组件就可以使用
微信小程序官网-自定义组件
index.josn

{
    "usingComponents": {
        "van-button": "@vant/weapp/button/index"
    }
}

每个人状况不一样:如下

如果报错:构建失败
vant-weapp官网
新版本没有
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
3、配置完先不要急于去点【构建npm】,而是先点击【重新打开此项目】(防止出现一些奇怪的问题)
在这里插入图片描述
4、等待项目重新打开加载完成后,再点击【构建npm】
在这里插入图片描述
微信开发工具构建

安装vant-weaap

在这里插入图片描述
在这里插入图片描述

注意:

配置好项目的路径之后记得重新打开项目再构建,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/663851.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初出茅庐的小李博客之使用立创开发板(ESP32)连接到EMQX Platform【MQTT TLS/SSL 端口连接】

介绍 手上有一块立创开发板,本着不吃灰的原则把它用起来,今天就来用它来连接上自己部署的MQTT服务器进行数据通信。 硬件:立创开发板 开发环境:Arduino IDE Win11 MQTT 平台:EMQX Platform 立创开发板介绍&#xff1…

ChatGPT AI专题资料合集【65GB】

介绍 ChatGPT & AI专题资料合集【65GB】 🎁【七七云享】资源仓库,海量资源,无偿分享√

OSError: [Errno 117] Structure needs cleaning

一 问题描述 OSError: [Errno 117] Structure needs cleaning: /tmp/pymp-wafeatri 我重新使用SSH登录也会提示这个类似问题 二 解决方法 2.1 尝试删除报错的文件 (想直接看最终解决方法的可忽略此处) sudo rm -rf /tmp/pymp-wafeatri 此种方法只能保证…

手机怎么投屏?值得收藏的5个投屏软件(2024全新)

在大屏幕上观看自己喜欢的电影、电视节目和其他媒体节目总是一种很棒的体验。因此,如果你正在寻找通过无线网络或USB数据线在windows或mac电脑或笔记本电脑上屏幕镜像、投屏到电脑显示屏上的指南,那么可以花3分钟时间往下看看。在本文中,小编…

现在,所有人都能免费用GPT-4o了!

OpenAI今日官宣,ChatGPT正式向所有用户免费开放!所有用户均可以访问定制化GPT、分析图表、询问有关照片的问题以及5月初GPT-4o添加的其他功能。 OpenAI今天在X上发布推文: 「所有ChatGPT免费用户现在都可以使用浏览、视觉、数据分析、文件上…

CSS+Canvas绘制最美星空(一闪一闪亮晶晶效果+流星划过)

1.效果 2.代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>body,html {margin: 0;padding: 0;ov…

tree2retriever:面向RAG场景的递归摘要树检索器实现

tree2retriever 面向RAG场景的递归摘要树检索器实现 Recursive Abstractive Processing for Tree-Organized Retrieval Github:https://github.com/yanqiangmiffy/tree2retriever Example import logging import picklefrom tree2retriever.cluster_tree_builder import Clus…

整理GTX收发器示例工程(高速收发器十一)

前文分析了xilinx官方提供的GTX IP示例工程&#xff0c;该代码的结构比较混乱&#xff0c;本文将该代码进行梳理&#xff0c;形成一个便于使用的模块&#xff0c;后续如果要使用多通道的收发器&#xff0c;多次例化某个模块就行了。 下图是官方例程中GTX IP相关模块的RTL视图&a…

Redis用GEO实现附近的人功能

文章目录 ☃️概述☃️命令演示☃️API将数据库表中的数据导入到redis中去☃️实现附近功能 ☃️概述 GEO就是Geolocation的简写形式&#xff0c;代表地理坐标。Redis在3.2版本中加入了对GEO的支持&#xff0c;允许存储地理坐标信息&#xff0c;帮助我们根据经纬度来检索数据。…

万界星空科技MES系统功能介绍

制造执行系统或MES 是一个全面的动态软件系统&#xff0c;用于监视、跟踪、记录和控制从原材料到成品的制造过程。MES在企业资源规划(ERP) 和过程控制系统之间提供了一个功能层&#xff0c;为决策者提供了提高车间效率和优化生产所需的数据。 万界星空科技MES 系统基础功能&am…

美国心理协会(APA)文献去哪里查找下载

今天讲一个关于心理学的数据库——美国心理协会&#xff08;APA&#xff09;数据库 PsycARTICLES&#xff08;心理学全文数据库&#xff0c;简称PA&#xff09;&#xff0c;收录美国心理学协会&#xff08;American Psychological Association&#xff0c;简称APA&#xff09;…

Android 图表开发开源库 MPAndroidChart 使用总结

1. 引言 电视项目中需要一个折线图表示节电数据变化情况&#xff0c;类比 H5 来说&#xff0c;Android 中也应该有比较成熟的控件&#xff0c;经过调研后&#xff0c;发现 MPAndroidChart 功能比较强大&#xff0c;网上也有人说可能是目前 Android 开发最好用的一个三方库了&a…

玩机进阶教程------修改gpt.bin分区表地址段 完全屏蔽系统更新 fast刷写分区表 操作步骤解析【二】

上期博文简单说明了分区表的基本常识。我们在有些环境中需要屏蔽手机的系统更新选项。除了以前博文中说明的修改系统更新下载文件夹的方法。还可以通过修改分区表类达到目的。在一些辅助维修工具上面带修改分区表功能。修改后效果为屏蔽系统更新和可以恢复出厂。原则上不深刷都…

kafka学习笔记06

Kafka数据存储流程和log日志讲解 讲解分布式应用核心CAP知识 Kafka数据可靠性保证原理之副本机制Replica介绍《上》 Kafka数据可靠性保证原理之副本机制Replica介绍《下》 Kafka数据可靠性保证原理之ISR机制讲解 Kafka的HighWatermark的作用你知道多少

安装flask:后端框架的学习之旅

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、创建虚拟环境 1. 引入虚拟环境的概念 2. 创建Flask虚拟环境 三、安装Flask…

web 前端开发技术---网页的制作

这是一个网页代码 上年包含了电子邮件&#xff0c;选项建 等等 分享给大家 <!-- prj_7_1.html --> <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8"><title>留言板设计</title><style type&…

Android Studio启动第一个项目的报错——笔记

零基础第一次使用Android Studio开发遇到的问题 1 新建项目下载gradle慢的问题 直接叉掉打开gradle官网手动下载自己想要的版本 gradle官网 然后在刚刚建好的项目里找到gradle-wrapper.properties&#xff0c;修改distributionUrl&#xff0c;并把自己从官网下载的包放到和gr…

【Python】解决Python报错:IndexError: queue index out of range

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

基于Pytorch框架的深度学习EfficientNetV2神经网络中草药识别分类系统源码

第一步&#xff1a;准备数据 5种中草药数据&#xff1a;self.class_indict ["百合", "党参", "山魈", "枸杞", "槐花", "金银花"] &#xff0c;总共有900张图片&#xff0c;每个文件夹单独放一种数据 第二步&a…

初识Spring Boot:构建项目结构与组件解析

目录 前言 第一点&#xff1a;项目的结构 第二点&#xff1a;controller类的创建与使用&#xff08;构造器&#xff09; 第二点&#xff1a;service类的创建与使用&#xff08;逻辑层&#xff09; 第三点&#xff1a;Mapper类的创建与使用(数据操作) 总结 前言 在进行Sp…