微信小步伐利用Vant

源码 · 2024-10-8 09:11:47

什么是Vant Weapp

vant Weapp是轻量、可靠的小步伐 UI 组件库

先容
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。
现在 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小步伐版本，并由社区团队维护 React 版本和付出宝小步伐版本。

1.创新小步伐后，打开新建的项目标根目次

2.安装步调：

安装Vant组件库（Vant Weapp快速上手）
在小步伐项目中，安装Vant组件库重要分为如下3步：
1、通过npm安装
2、构建npm包
3、修改app.json
步调一：通过npm安装指定版本vant

1、在项目空缺处右键，有个在外部终端窗口打开，点击

出现以下窗口

2、在安装包的时间，须要保证项目内里有package.json文件。以是须要初始化一个包管理文件。
npm init -y

3、安装vant
npm i @vant/weapp -S --production4、安装 miniprogram
npm i miniprogram-sm-crypto --production步调二：构建npm包

1、打开微信开辟者工具，点击工具>>构建npm，构建完成后，即可引入组件

2、点击上图简直定之后，还须要点击右上角的详情，选择当地设置，勾选利用npm模块

我的是新版本没有这一项就不须要手动勾选了。
步调三：修改app.json

1、《留意》去除该文件中的 style:'v2'，小步伐的新版基础组件强行加上了许多样式，难以去除，不关闭的话将造成部门组件样式紊乱。
2、利用微信开辟者工具所创建的项目，miniprogramRoot 默以为 miniprogram，而package.json 在其外部，npm 构建无法正常工作。须要手动在 project.config.json 内添加如下设置，使开辟者工具可以准确索引到 npm 依靠的位置
{ ... "setting": { ... "packNpmManually": flase, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ] }此时就安装vant乐成了~
步调四：怎样利用

安装完vant组件库之后，可以在app.json的usingComponents节点中引入须要的组件，即可在wxml中直接利用组件。
（1）按需引入：
在对应的page页面的 .json文件中的usingComponents属性中通过路径找到@vant引入你想利用的组件。我的vant是位于下面貌次中。
引入：
（2）全局引入
在app.json文件中引入。缺点就是会给项目启动造成压力，最好照旧按需引入。
————————————————
原文链接：https://blog.csdn.net/qq_41579104/article/details/125354730
https://blog.csdn.net/weixin_43968782/article/details/127222778

微信小步伐利用Vant

所属分类: 问答交流

新帖推荐: 30日

推荐作品