微信小程序生成package.json文件，在微信小程序中引入vant Weapp組件

1、微信小程序目錄下沒有package.json文件，這里需要用到packae.json文件；

 

2、新建一個微信小程序，在小程序目錄下 輸入命令：npm init（記得以管理員身份運行開發工具）,然后一直回車，直至在小程序目錄下，生成package.json文件。

 

方法一:通過npm構建

3、通過npm安裝,執行以下命令

       1：npm install --production

       2：# 通過 npm 安裝

        npm i @vant/weapp -S --production

            # 通過 yarn 安裝

         yarn add @vant/weapp --production

4、微信開發者工具中 構建npm包

4-1、點擊構建npm

 

 

 

4-2、勾選使用npm模塊

 

 

 

 

5、修改 app.json

將 app.json 中的 "style": "v2" 去除，小程序的新版基礎組件強行加上了許多樣式，難以去除，不關閉將造成部分組件樣式混亂。

6、引入組件

以 Button 組件為例，只需要在app.json或index.json中配置 Button 對應的路徑即可。如果你是通過下載源代碼的方式使用 @vant/weapp，請將路徑修改為項目中 @vant/weapp 所在的目錄。

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

7、引入組件后，可以在 wxml 中直接使用組件

<van-button type="primary">按鈕</van-button>

方法二：下載源碼引入到項目中

　　直接通過 git 下載 Vant Weapp 源代碼，並將dist目錄拷貝到自己的項目中，然后引入組件，使用組件；

　 git clone https://github.com/youzan/vant-weapp.git

vant Weapp官網     https://youzan.github.io/vant-weapp/#/quickstart