当前位置: 首页 > news >正文

原生微信小程序引入npm和安装Vant Weapp

目录

  • 一、引入npm+安装Vant Weapp
    • 1、引入npm
    • 2、安装Vant Weapp
    • 3、修改 app.json
    • 4、修改 project.config.json
  • 二、构建npm

一、引入npm+安装Vant Weapp

环境:Windows10 开发工具:微信开发者工具 本地环境:已安装过node.js

1、引入npm

cmd进入到你本地微信小程序项目目录后,输入 npm init后回车,之后会出现一系列需要你填的东西,填好后回车。

2、安装Vant Weapp

当npm安装完之后,再输入npm i @vant/weapp -S --production回车等待安装完成。如下图:
在这里插入图片描述

3、修改 app.json

将微信小程序项目中 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

4、修改 project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

{..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]}
}

注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为’./'即可。

如果您需要typescript 支持,具体可以参照Vant Weapp官网文档。
Vant Weapp官网跳转链接:
链接: 点击跳转Vant Weapp官网地址

二、构建npm

在微信开发者工具中点击选择:工具→构建npm,到此就可以使用了,如下图:
在这里插入图片描述

http://www.lryc.cn/news/26010.html

相关文章:

  • ChatGPT文章自动发布WordPress
  • vue项目使用watch监听器监听数据变化
  • 动态规划(背包问题)
  • 04741自考计算机网络原理最详细汇总
  • MySQL 入门学习笔记(二) 基本操作
  • 【Linux】理解文件系统
  • Java如何String字符串带括号转成List
  • react 使用 mqtt
  • W25Q256被写保护如何修改
  • 论文投稿指南——中文核心期刊推荐(中国文学作品)
  • MySQL 问题总结
  • 62. 不同路径
  • 在windows安装python3.11同时进行一个数据的练习
  • Java接口专题
  • 6招优化WordPress打开速度-让你的网站飞起来
  • 春天到了,来一场 VoxEdit 创作大赛吧!
  • 异步Buck和同步Buck的特点
  • 基于轻量级YOLO开发构建中国象棋目标检测识别分析系统
  • 机器学习100天(三十五):035 贝叶斯公式
  • 大话数据结构-栈
  • javaFx实现放大镜效果——圆形、矩形、三角形放大镜,拖动调整放大镜大小,设置放大倍数
  • 什么是客户忠诚度?建立忠诚文化的 5 种方法
  • 【ROS2知识】关于colcon编译和ament指定
  • 数据结构: 最小栈
  • STM32之PWM
  • 操作系统(1.1)--引论
  • Spring boot + mybatis-plus 遇到 数据库字段 创建不规范 大驼峰 下划线 导致前端传参数 后端收不到参数 解决方案
  • JavaScript String 字符串对象
  • Lazada如何做好店铺运营?产品定价是关键
  • 空口协议Eapol、802.11 Action、802.11 BAR 和 802.11BA、802.11 Encrypted Data讲解