小程序中使用框架vant

前言：

        小程序開發一般分爲兩種，原生小程序開發，只用小程序的api中提供的一些組件，還有一種是使用框架，我這裏分析下使用vant框架的教程

微信官方文檔入口      vant框架入口

步驟：

1.初始化安裝node需要的包，依次執行下面三個命令

npm init  初始化
npm install --production
npm i vant-weapp -S --production

2.點擊工具-構建npm

生成結果：多了miniprogram_npm

3.配置框架要使用的部分，這裏是按需引入，我這裏放app.json

"usingComponents": {
    "van-field": "miniprogram_npm/vant-weapp/field/index",
    "van-button": "miniprogram_npm/vant-weapp/button/index",
    "van-notify": "miniprogram_npm/vant-weapp/notify/index",
    "van-toast": "miniprogram_npm/vant-weapp/toast/index",
    "van-icon": "miniprogram_npm/vant-weapp/icon/index",
    "van-stepper": "miniprogram_npm/vant-weapp/stepper/index",
    "van-submit-bar": "miniprogram_npm/vant-weapp/submit-bar/index"

  }

4.在頁面使用我們按需引入的組件

<van-button type="default">默認按鈕</van-button>

5.注意有特殊的跟彈框一樣的存在是需要在js中再次引入的

import Notify from '../../miniprogram_npm/vant-weapp/notify/notify';
import Toast from '../../miniprogram_npm/vant-weapp/toast/toast';  //引入toast