ミニプログラムは、vant-Weappインストールの詳細な手順と問題解決を紹介します

---

ミニプログラムでvant-Weappが導入されました

この記事では、公式Webサイトで提供されているインストール手順を繰り返したり、インストール中に発生し
た問題を整理したりすることはありません。この開発では、クラウド開発サービスを使用していません。

---

ヒント：以下はこの記事の内容です。以下のケースは参照用です。

1つは、小さなプログラムを作成する

ヒント：作成済み

ヒント：ターミナルを起動します

2.公式ウェブサイトインストールリンク

すぐに始めましょう

ヒント：インストールの簡単な手順に従ってください。詳細については説明しません。

# 通过 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$

プロンプト：公式Webサイトに従って、構成をすばやく開始します。プロンプト：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
// 会出现上面的错误，解决办法

設定：説明フィールドの内容は重要ではなく、空ではありません。2番目の権限はプライベートに設定できます。その後、npmインストールコマンドを通常どおり使用できます。

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

ヒント：再インストール後、node_modulesファイルパッケージが表示されます

再実行しても
ミニプログラムが見つかりません。この問題を解決するには、ルートディレクトリにミニプログラムを作成してください。プロンプト：build 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で使用でき、導入は成功しています

上記のいくつかは正しくありません、あなたが完璧でないならば私に知らせてください、それがあなたを助けることができるならば評価に注意を払ってください