【微信小程序开发】Nodejs npm的安装与微信小程序适配以使用VantWeapp与配置npm遇到的问题

原创 已于 2023-03-31 15:53:04 修改 · 1.2k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #npm #小程序

于 2023-03-31 14:56:42 首次发布
文章介绍了如何安装Node.js和npm，以及在安装VantWeapp时遇到的命名冲突和构建错误。通过修改packNpmRelationList的路径，清除缓存，以及使用npminit命令，可以成功解决构建报错并初始化项目。

Nodejs与npm安装

首先进入官网安装Node.js 中文网

在这里插入图片描述
按照自己的版本安装，安装完Nodejs后会自动安装npm，在终端输入可以看到安装的版本

node -v
npm -v

在这里插入图片描述
打开微信小程序，在调试器中新建终端并输入

npm i @vant/weapp -S --production

在这里插入图片描述
生成这个文件夹后便成功安装
在这里插入图片描述

VantWeapp网站

然后按照官网配置
在这里插入图片描述
会出现飘红
在这里插入图片描述
这里代表上面已经有一个packNpmRelationList了，这里名称重复
在这里插入图片描述

npm构建报错

但是还是会产生报错
在这里插入图片描述
这里我们需要将packNpmRelationList中的地址从./miniprogram/改为./node_modules
在这里插入图片描述

然后清除一下缓存
在这里插入图片描述
便可以成功构建npm
在这里插入图片描述

找不到@vant/weapp/button/index

在终端输入npm init -y
在这里插入图片描述
然后重新构建一下就好了

【微信小程序】微信小程序开发环境搭建：Node.js环境安装指南
墨夶的博客
11-12 3783
通过本文的介绍，你应该已经成功安装了Node.js和微信开发者工具，为微信小程序开发做好了准备。接下来，你可以开始编写你的第一个小程序项目，探索更多有趣的功能和特性。祝你开发顺利，创造更多优秀的作品！
微信小程序(typescript) npm添加Tdesign UI组件库
嘿，欢迎来到我的 IT 技术博客！我独立开发了出租屋管理系统。开发中历经数据库设计难题、接口对接困境，在此分享历程与心得 。
01-24 4696
最近，发现一个新的微信小程序UI组件库-TDesign。腾讯自家出品，颜值杠杆。
微信小程序+Nodejs项目实战合集
04-03
微信小程序+Nodejs项目实战合集 内含两套完整实战教你全为了解一个小程序的开发流程及步骤
微信小程序node.js框架
01-24
微信小程序node.js框架.下载之后需要按照官方文档进行调配即可看到效果
微信开发者工具安装和配置node.js教程
token_10的博客
02-08 7516
解决微信开发者工具内建终端无法使用npm命令的问题。
微信小程序的注册安装以及node.js的环境搭建
weixin_44855758的博客
08-01 3296
这里写自定义目录标题注册微信小程序账号创建HelloWorld微信小程序node.js环境搭建合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与...
精选资源
音乐类听歌小程序 uni-app 微信小程序
04-24
使用uni-app开发的音乐类听歌小程序，适配android/ios全名屏，刘海屏，异形屏等，目前仅支持h5端及微信小程序端。 安装项目依赖：npm install 前端启动命令： H5：npm run dev:h5 微信小程序：npm run dev:mp-...
从零开始开发微信小程序：全面指南
百态老人的博客
06-03 4105
学习制作微信小程序，希望通过这次学习能够实现跨平台的统一开发，从而提高自己的编程和开发能力。
原生微信小程序使用原子化tailwindcss
weixin_68658847的博客
12-08 2058
原生微信小程序使用原子化tailwindcss
前端mpvue后端nodejs+thinkjs+mysql微信小程序商城(准备用uniapp重构并适配多端).zip
最新发布
08-30
mpvue作为Vue.js的改良版，允许开发者使用Vue.js开发微信小程序，它通过预编译的方式将Vue组件转换成小程序的wxml和wxss文件，同时也支持使用Vue熟悉的开发方式和npm生态系统的包。ThinkJS是一个为了解决企业级应用...
微信小程序搭载node.js服务器（简）
热门推荐
灵魂学者的博客
04-17 2万+
微信小程序快速搭载node.js服务器，适合新手使用。
【微信小程序】小程序开发—node.js下载，npm配置以及组件使用
m0_56259342的博客
12-27 1万+
微信小程序用node中npm安装vant组件
干货！微信小程序通过NodeJs连接MySQL数据库
软工科班，擅长Matlab、C++、微信小程序开发
04-17 7785
在前后端+数据库架构的思维中，微信小程序的生态地位是充当前端，后端和数据库还需开发者另外准备。微信开放社区提供强悍的云函数、云数据库、CMS内容管理，无疑为开发小程序的功能提供了不少便捷。当我们在开发PC端的系统时，常见的SSM框架或者SpringBoot混合Vue，使用的数据库多为MySQL，这时如果我们想开发一套多端同步的系统，使用云开发会导致数据无法同步到PC端。因此一个解决方案是：微信小程序也使用MySQL作为数据库。
微信小程序使用Node.js实现的简单的服务器聊天功能
lin8705600H的博客
05-22 834
（node.js安装到官网安装即可，将对应准备好的服务器文件放置在文件夹中，cd进入文件夹）首先启动node.js服务。
微信小程序云开发：安装Node.js
fghfghhgjgj的博客
12-06 1408
一定要在中文网下载，下载网址：http://nodejs.cn/download/。 在英文官网下载太慢了。 打开命令行，输入node -v或者 npm -v，显示版本号，就是安装成功了。 用npm安装，默认是保存到C盘的，需要更改目录。 2、修改全局依赖包下载路径 默认情况下，我们在执行npm install -g XXXX下载全局包时，这个包的默认存放路径位C:\Users\用户名\AppData\Roaming\npm\node_modules下，可以通过CMD指令npm root -g查看 C:\
微信小程序开发工具与Node.js的安装
weixin_40055163的博客
01-01 5752
1 安装 1.1 下载与安装微信开发工具 1.下载的链接如下: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 如图所示：说明下载成功！ 2.选中，点击右键“以管理员算法运行”，如图所示: 3.进入欢迎界面点击下一步，即可！ 4.点击我接受，如图所示： 5.修改路径，点击安装。如图所示： 6.点击完成即可，如图所示： 7.使用自己微信扫描登录，如图所示： 8.登录之后会进入到如图所示的界面： 1.2
nodejs实现微信小程序
LUANGhuan110的博客
09-20 2317
nodejs实现微信小程序登陆
微信小程序后端开发实战：基于Node.js的完整示例
weixin_42518334的博客
08-20 1197
在数字化时代的浪潮下，微信小程序已经成为企业拓展移动端业务的重要平台。作为小程序的后台支持，后端技术的应用显得尤为重要。本章将简要概述微信小程序后端的概念、工作原理以及在开发过程中扮演的角色。后端不仅为小程序提供必要的数据存储、业务逻辑处理和安全性保障，而且在性能优化和用户体验提升方面也具有关键作用。接下来的章节，我们将深入探讨Node.js，它是现代后端开发的流行选择之一，具备轻量级、高性能等优势，特别适合构建微信小程序的后端服务。
微信开发者工具使用npm
qq_63479260的博客
06-05 1194
首先要初始化npm：在编辑器资源管理器空白处右键打开终端（如图1-1），在终端输入npm init（图1-2）。这里我想使用讯飞接口，还有一个模块需要使用：base64编码，上网搜索可以使用的npm（图1-7）这里我安装了两个模块（图1-4、图1-5）：crypto-js和xmldom。在下载完成npm以后，需要再微信开发者程序上构建一遍才可以开始使用（图1-6）可见xmldom模块有一个漏洞，可以用npm audit命令查看（图）可以在package-lock.json文件中查看使用详情（图1-8）
微信小程序npm安装教程
06-24
在微信小程序中使用 npm 安装依赖包的过程与传统的 Web 开发略有不同，因为微信小程序运行在特定的运行环境中。以下是详细的步骤说明： ### 初始化 npm 环境 1. **安装 Node.js** 在开始之前，请确保已经在本地计算机上安装了 [Node.js](https://nodejs.org)。推荐使用最新版本的 Node.js，因为它包含了 npm（Node 包管理器），用于下载和管理第三方库。 2. **进入项目根目录** 打开终端或命令行工具，导航至你的微信小程序项目的根目录。例如： ```bash cd /path/to/your/project ``` 3. **初始化 npm 项目** 如果这是你第一次在这个项目中使用 npm，则需要运行以下命令来生成 `package.json` 文件： ```bash npm init -y ``` 这将快速创建一个默认配置的 `package.json` 文件，它记录了项目的元数据以及所依赖的 npm 包信息[^1]。 ### 安装 npm 包 4. **安装所需的 npm 包** 使用 `npm install` 命令加上包名来安装特定的 npm 包。例如，如果你想安装 `prismjs`，可以执行： ```bash npm install prismjs ``` 此操作会把 `prismjs` 下载到项目的 `node_modules` 目录，并自动更新 `package.json` 中的依赖列表[^1]。 5. **修改 app.json 配置文件** 在某些情况下，为了兼容性考虑，可能需要调整小程序的基础配置。具体来说，在 `app.json` 文件中移除 `"style": "v2"` 这一行代码，因为该设置可能会干扰部分 npm 包的正常显示效果[^2]。 6. **引入并使用 npm 包** 在需要的地方通过 `require()` 或 `import` 引入已安装的 npm 包。比如，在页面 JS 文件中这样写： ```javascript const _ = require('prismjs'); // 或者使用 ES6 的 import 语法 import _ from 'prismjs'; ``` 注意：由于微信小程序对模块系统的限制，不是所有的 npm 包都能直接在小程序中使用；有些可能需要额外的适配工作才能正常运作[^2]。 ### 注意事项 - 微信开发者工具提供了对 npm 支持的功能，但并非所有 npm 包都适用于小程序环境。 - 对于大型或复杂的库，建议查阅官方文档或者社区资源以获取最佳实践指南。 - 如果遇到兼容性问题，可以尝试寻找专门为小程序优化过的替代库。 以上就是如何在微信小程序中利用 npm 来安装和使用外部依赖的基本流程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值