微信小程序使用Vant

发布时间:2021-07-24 23:30:12 浏览量:1496 标签: 微信 小程序 Vant

Vant很早就听说过,有赞前端团队维护的移动端组件库,更多的内容去官方文档看吧!


个人开发环境

MAC、微信小程序开发工具


安装步骤

1、微信小程序构建小程序项目

2、安装Vant

3、使用Vant



微信开发者工具创建小程序具体的步骤就不说了,直接说安装;


个人情况:我的电脑里面没有npm,需要安装,安装方式,通过安装node,从而安装npm,官网下载lts版本的安装包。


地址:https://nodejs.org/zh-cn/(无传送门,手动复制打开)


1627140998262107.png


选择自己平台的安装包,我这里选择的是macos安装包,点击下载就可以(我这里默认使用的最新的lts版本,14版本)


node安装过程非常的简单,mac的直接一路next就可以了。安装成功后在微信开发者工具里面打开终端,验证node安装情况;


node版本查看命令:

node -v


运行截图,如下:

1627141291778551.png


可以看到终端显示的信息为 v14.17.3,这个信息和上图下载的软件包信息一致,安装成功。


npm版本查看命令:

npm -v


运行截图,如下:

1627141432133893.png


可以看到终端显示的信息为 6.14.13,表示我们npm运行成功。


步骤一 安装Vant


使用npm进行安装,安装命令如下:

npm i @vant/weapp -S --production


步骤二 修改 app.json

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

步骤三 修改 project.config.json

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

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

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

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

步骤四 构建 npm 包

打开微信开发者工具,点击 工具 -> 构建 npm,右上角 详情 下勾选 使用 npm 模块 选项,构建完成后,即可引入组件。


步骤五 使用组件

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

所有组件文档中的引入路径均以 npm 安装为例,如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}



评论
登录后才可以进行评论哦! QQ登录
验证码
评论内容