微信小程序使用npm、miniprogram管理

  1. 创建微信小程序基础模板
  2. 在根目录创建一个miniprogram文件夹
  3. 将pages、utils、app、sitemap.json等和源代码相关的文件移到miniprogram文件夹下。
  4. 在项目根目录打开终端 执行 npm init -y
  5. 修改配置文件project.config.json
bash 复制代码
{
	"miniprogramRoot": "miniprogram/",
	"setting": {
		"packNpmManually": true,
    	"packNpmRelationList": [
      		{
        		"packageJsonPath": "./package.json",
        		"miniprogramNpmDistDir": "./miniprogram"
		    }
	    ]
	}
}
  1. npm i @vant/weapp -S --production // 安装 vant weapp组件库

  2. 点击上方的【工具栏】构建npm,(如果出现错误,重启项目重新构建npm)

  3. 使用vant weapp按钮组件

    bash 复制代码
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
相关推荐
ON.LIN7 小时前
云边去水印小程序详细搭建教程(附源码)
小程序
2501_9159090610 小时前
iOS test 测试怎么做?功能、性能、兼容、稳定与安全五类测试指南
android·ios·小程序·https·uni-app·iphone·webview
暂时先用这个名字13 小时前
安装deepseek harness及插件
人工智能·ai·npm·pnpm·deepseek·深度求索·harness
Ai-_Man15 小时前
从AI公式到可编辑文档:MathType格式转换技术分析教程
人工智能·ai·小程序
show4331 天前
2026视频处理小程序技术选型指南:链接解析+OCR+ASR+AI配音多引擎对比
小程序·ocr·音视频
凡科网小帆1 天前
2026小程序商城平台哪家强,小程序商城平台选型怎么做
大数据·小程序·小程序商城平台
游戏开发爱好者82 天前
App Store 上传 IPA 自动化,.p8 密钥认证与 CI/CD 接入实战
android·运维·ci/cd·小程序·uni-app·自动化·iphone
Greg_Zhong2 天前
微信小程序 + 腾讯云人体分析:从 0 到 1 实现 AI 抠图打卡合照(细节待更新~)
人工智能·微信小程序·腾讯云·ai抠图-ai打卡拍照
游戏开发爱好者82 天前
iOS 推送怎么配置,APNs 推送证书、设备库与群发
android·ios·小程序·https·uni-app·iphone·webview
snow@li2 天前
小程序:200知识点/速查手册
小程序