微信小程序Vant Weapp框架的配置

目录

前言

一、新建微信小程序目录

二、通过npm安装

1.打开命令行窗口，cd至上述目录

2.输入以下命令

3.执行以下命令

三、修改app.json

四、构建npm

五、引入组件示例

---

前言

        在做项目的过程中，使用一些现有的框架能极大地提升开发效率。笔者近期在做一个项目，需要开发一个微信小程序，借此机会学习一个新的框架Vant Weapp，顺便记录一下。由于本人才疏学浅，有错误之处恳请谅解，一起交流。

一、新建微信小程序目录

在桌面新建文件夹，我这里命名为wx，然后通过微信开发者工具导入新项目。

二、通过npm安装

1.打开命令行窗口，cd至上述目录

cd C:\Users\86135\Desktop\wx

2.输入以下命令

 npm i vant-weapp -S --production

3.执行以下命令

npm init

然后会提示一些配置，我们初学者先不用管，一直回车就行

三、修改app.json

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

四、构建npm

打开微信开发者工具，依次点击工具->构建npm，等待提示完成构建后，点击详情->本地设置->使用npm模块，至此构建完成，即可引入组件。

五、引入组件示例

此处以button为例，在app.json或index.json中配置Button对应的路径即可。

在构建完npm后会生成miniprogram_npm目录，找到该目录下的button路径，按如下在app.json中配置

"usingComponents": {

    "van-button": "miniprogram_npm/vant-weapp/button/index"

  }

 然后就可以在index.wxml中使用这些按钮了，效果如下。