微信小程序使用 Vant Weapp 的步骤

Posted 2023-03-23

参考技术A 原文链接：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 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况，构建之前的结构：

小程序引入vant-Weapp

参考技术A <font color=#999AAA >本文不再赘述官网提供的安装步骤紧在安装之时遇见的问题进行梳理
此次开发不使用云开发服务</font>

<hr style=" border:solid; width:100px; height: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>

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