小程序引入vant-Weapp

小程序引入vant-Weapp,第1张

<font color=#999AAA >本文不再赘述官网提供的安装步骤紧在安装之时遇见的问题进行梳理

此次开发不使用云开蚂猜唯发服务</font>

<hr style=" border:solidwidth:100pxheight:1px" color=#000000 size=1">

<font color=#999AAA >提示:以下是本篇文章正文内容,下面案例可供参考</font>

<font color=#999AAA >提示:创建完成</font>

<font color=#999AAA >提示:启动终端</font>

快速上手

<font color=#999AAA >兆扰提示:按照快速上闷培手步骤进行安装,不在赘述</font>

<font color=#999AAA >提示:按照官网快速上手进行配置</font>

<font color=#999AAA >提示:在进行构建npm 时会报错找不到此文件</font>

设置:description字段的内容无所谓,不为空即可;第二个权限设置成私有的即可。接下来就可以正常使用npm安装命令了。

<font color=#999AAA >提示:再次安装后会出现node_modules文件包</font>

出现未找到miniprogram 自行在根目录创建miniprogram解决此问题

<font color=#999AAA >提示:按照快速上手的方法引入组建会出现此路径错我,进行解决方法为下方方法</font>

<font color=#999AAA >提示:至此,vant Weapp 就可以在index.wxml 使用,引入成功</font>

以上有说的不对,不完善的还请各位大神指教,如能帮助您请关注评价哦

话不多说,记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp

Github源码: https://github.com/youzan/vant-weapp

中文文档: https://youzan.github.io/vant-weapp/#/intro

1:打开微信开发者工具,填写自己的appid和项大敏目名称,选择不使用云服务,新建一个项目。

2:右击在选择在终端打开

进入项目的根伍仿茄目录底下,注意,一定要进入根目录哦,使用cd ../返回上一级目录~

3:小程序已经支持使用 npm 安装第三方包,

这里通过 npm 安装

这里需要注意一下

npm i vant-weapp -S --production或者npm i @vant/weapp -S --production

引入的区别

使用npm i vant-weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径

使用npm i @vant/weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径(推荐,因为这个可以直接抄文档,不需要改变引入路径的~)

4:在微信开发工具执行npm 构建,点击工具里面,构建npm

构建过程需要等待一会儿,不要捉急

构建完会生成一个miniprogram_npm文件夹

如果构建完如果编译报错,再构建一次就好了

日历文档参照一下

5:使用vant-weapp日历组件

我这里对日期的处理,是需要这样的格式YYYY-MM-dd

所以在对选中的日期做了腔察一些处理和判断~

wxml

js

json

原文链接:https://www.jb51.net/article/167545.htm

原文链接:https://blog.csdn.net/ShiXinXin_Harbour/article/details/102568389

原文链接:https://youzan.github.io/vant-weapp/#/quickstart

原文链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

1、在根目录中,打开终端命令,cd到你的项目miniprogram目录下;

2、npm 初始化,如果段含你的小程序项目没有安装过npm包的话,你需要先初始化npm,

      npm init

3、# 通过 npm 安装

        npm i @vant/weapp -S --production

4、

5、修改该配置项

构建npm时,会在node_modules的同级目录中创建一个miniprogram_npm;miniprogram_npm包才是小程序真正使用的npm包;

原理介绍

为了帮助大家更好的理解发布 npm 包中提到的各种要求,这里简单介绍一下原理:

首先 node_modules 目录不会参与编译、上传手燃神和打包中,所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程,在每一份 miniprogramRoot 内开发者声明的 package.json 的最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录,里面会存放构建打包后的 npm 包,也就是小程序真正使用的 npm 包。

构建打包分为两种:小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中;其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程(类似 webpack)。

寻找 npm 包毕亏的过程和 npm 的实现类似,从依赖 npm 包的文件所在目录开始逐层往外找,直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况,构建之前的结构:


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/12503423.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2025-08-25
下一篇2025-08-25

发表评论

登录后才能评论

评论列表(0条)

    保存