小程序引入vant-Weapp
<font color=#999AAA >本文不再贅述官網(wǎng)提供的安裝步驟緊在安裝之時(shí)遇見的問題進(jìn)行梳理
此次開發(fā)不使用云開發(fā)服務(wù)</font>
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
<font color=#999AAA >提示：以下是本篇文章正文內(nèi)容，下面案例可供參考</font>
一、創(chuàng)建小程序
<font color=#999AAA >提示：創(chuàng)建完成</font>
<font color=#999AAA >提示：啟動(dòng)終端</font>
二、官方網(wǎng)站安裝鏈接
<font color=#999AAA >提示：按照快速上手步驟進(jìn)行安裝，不在贅述</font>
# 通過 npm 安裝
npm i @vant/weapp -S --production
//安裝中.....
//安裝完成出現(xiàn).....
+ @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$
<font color=#999AAA >提示：按照官網(wǎng)快速上手進(jìn)行配置</font>
<font color=#999AAA >提示：在進(jìn)行構(gòu)建npm 時(shí)會(huì)報(bào)錯(cuò)找不到此文件</font>
// 在終端輸入
$ npm init
// 然后一直回撤就好，如需要配置請(qǐng)自行輸入
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$
// 根據(jù)錯(cuò)誤信息提示執(zhí)行
$ 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
// 會(huì)出現(xiàn)上面的錯(cuò)誤，解決辦法
設(shè)置：description字段的內(nèi)容無所謂，不為空即可；第二個(gè)權(quán)限設(shè)置成私有的即可。接下來就可以正常使用npm安裝命令了。
// 再次執(zhí)行
$ npm install
//如執(zhí)行安裝依賴模塊命令不出現(xiàn)node_modules包
//再次執(zhí)行
$ npm i @vant/weapp -S --production
<font color=#999AAA >提示：再次安裝后會(huì)出現(xiàn)node_modules文件包</font>
再次執(zhí)行出現(xiàn)未找到miniprogram 自行在根目錄創(chuàng)建miniprogram解決此問題
<font color=#999AAA >提示：再次執(zhí)行構(gòu)建 npm 后 會(huì)出現(xiàn)以上提示</font>
三、引入組建
以 Button 組件為例，只需要在app.json或index.json中配置 Button 對(duì)應(yīng)的路徑即可。
所有組件文檔中的引入路徑均以 npm 安裝為例，如果你是通過下載源代碼的方式使用 @vant/weapp，請(qǐng)將路徑修改為項(xiàng)目中 @vant/weapp 所在的目錄。
// 通過 npm 安裝
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
<font color=#999AAA >提示：按照快速上手的方法引入組建會(huì)出現(xiàn)此路徑錯(cuò)我，進(jìn)行解決方法為下方方法</font>
//原舉例為
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
//修改正確的為
"usingComponents": {
"van-button": "/miniprogram/miniprogram_npm/@vant/weapp/button/index"
}
<font color=#999AAA >提示：至此，vant Weapp 就可以在index.wxml 使用，引入成功</font>
以上有說的不對(duì)，不完善的還請(qǐng)各位大神指教，如能幫助您請(qǐng)關(guān)注評(píng)價(jià)哦
