小程序引入vant-Weapp

本文不再赘述官网提供的安装步骤紧在安装之时遇见的问题进行梳理
此次开发不使用云开发服务

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建小程序

在这里插入图片描述
提示：创建完成

在这里插入图片描述
提示：启动终端

二、官方网站安装链接

提示：按照快速上手步骤进行安装，不在赘述

# 通过 npm 安装
npm i @vant/weapp -S --production
//安装中.....
//安装完成出现.....
+ @vant/weapp@1.6.5
updated 1 package in 41.908s

75 packages are looking for funding
  run `npm fund` for details
bogon:clientWx wyx$

提示：按照官网快速上手进行配置
在这里插入图片描述

提示：在进行构建npm 时会报错找不到此文件

// 在终端输入
$ npm init
// 然后一直回撤就好，如需要配置请自行输入
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (clientwx) 
version: (1.0.0) 
description: 
entry point: (app.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/wyx/2019RRDF/rrdfFriendWorker/views/clientWx/package.json:

{
  "name": "clientwx",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) 
bogon:clientWx wyx$

提示：再次执行构建npm 在这里插入图片描述

// 根据错误信息提示执行
$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN clientwx@1.0.0 No description
npm WARN clientwx@1.0.0 No repository field.

up to date in 0.534s
// 会出现上面的错误，解决办法

在这里插入图片描述

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

// 再次执行
$ npm install
//如执行安装依赖模块命令不出现node_modules包
//再次执行
$ npm i @vant/weapp -S --production

在这里插入图片描述
提示：再次安装后会出现node_modules文件包

再次执行在这里插入图片描述
出现未找到miniprogram 自行在根目录创建miniprogram解决此问题

提示：再次执行构建 npm 后会出现以上提示

三、引入组建

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

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

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

在这里插入图片描述
提示：按照快速上手的方法引入组建会出现此路径错我，进行解决方法为下方方法

//原举例为
"usingComponents": {
    
    
  "van-button": "@vant/weapp/button/index"
}
//修改正确的为
"usingComponents": {
    
    
	"van-button": "/miniprogram/miniprogram_npm/@vant/weapp/button/index"
}

在这里插入图片描述
提示：至此，vant Weapp 就可以在index.wxml 使用，引入成功

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