步骤一:微信小程序空白地方右键 → 在外部终端窗口打开
步骤二 通过 npm 安装
输入npm init,然后填写初始化信息,默认值可以按回车
npm init
npm i @vant/weapp -S --production
步骤二 修改 app.json
将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
步骤三 修改 project.config.json
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmdistDir": "./miniprogram/"
}
]
}
}
步骤四 构建 npm 包
打开微信开发者工具,点击 工具 -> 构建 npm,构建完成后,即可引入组件
步骤五 引入组件
以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。
所有组件文档中的引入路径均以 npm 安装为例,如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录
// 通过 npm 安装
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
步骤六 使用组件
<van-button type="primary">按钮</van-button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。