小程序引入 Vant Weapp 极简教程

一切以 Vant Weapp 官方文档 为准

Vant Weapp 官方文档 - 快速入手

1. 安装nodejs

前往官网下载安装即可

nodejs官网

安装好后 在命令行(win+r,输入cmd)输入

复制代码
node -v

若显示版本信息,即为安装成功

2. 在 小程序根目录 命令行/终端 执行命令

开发工具 - 目录 - 右键 - 在外部中端窗口打开


或者

小程序项目目录 - 搜索栏 - 输入cmd - 回车

3. 执行命令

初始化package.json

后面加上 -y ,表示所有选项都选择 yes,就不需要每一项都手动选择 yes 选项

复制代码
npm init -y

通过 npm 安装

复制代码
npm i @vant/weapp -S --production

4. 设置npm

工具 - 构建npm

5. 去除小程序基础组件样式

将 app.json 中的 "style": "v2" 去除

小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

6. 引入组件

以 Button 组件为例,只需 在app.json或index.json中配置 Button 对应的路径

建议在app.json中配置,全局配置更加方便,不必在每一个index.json中反复配置

复制代码
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
} 

7. 使用组件

引入组件后,可以 在 wxml 中直接使用组件

复制代码
<van-button type="primary">按钮</van-button>

8. 构建npm常见问题

提示:没有找到可以构建的NPM包,请确认需要参与...

解决办法:

找到根目录下的 project.config.json 文件
修改 packNpmManually 和 packNpmRelationList

复制代码
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],
相关推荐
说私域11 分钟前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
软件黑马王子22 分钟前
C#系统学习第八章——字符串
开发语言·学习·c#
strongwyy3 小时前
蓝牙墨水屏上位机学习(2)
学习
九皇叔叔3 小时前
(3)手摸手-学习 Vue3 之 变量声明【ref 和 reactive】区别
学习
一渊之隔3 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
致***锌3 小时前
期权标准化合约是什么?
笔记
Wilber的技术分享4 小时前
【机器学习实战笔记 14】集成学习:XGBoost算法(一) 原理简介与快速应用
人工智能·笔记·算法·随机森林·机器学习·集成学习·xgboost
The_cute_cat5 小时前
Ajax和Axios的初步学习
前端·学习·ajax
amazinging5 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十三天
python·学习
V我五十买鸡腿6 小时前
顺序栈和链式栈
c语言·数据结构·笔记·算法