技術標籤：vuevantvuevant小程式mpvue

使用vant-weapp元件

本文以vant-weapp為例
步驟見官網快速上手：https://vant-contrib.gitee.io/vant-weapp/#/quickstart

配置vant-weapp

webpack.base.config.js配置
	- 作用: 在編譯的時候在小程式中複製node_modules檔案加下的vant-app/dist目錄
	new CopyWebpackPlugin([
	 {
	    from: resolve('node_modules/vant-weapp/dist'),
	    to: resolve('dist/wx/miniprogram_npm/vant-weapp'),
	    ignore: ['.*']
	  }
	])
 

//  project.config.json 手動修改npm 依賴的位置
	"packNpmManually": true,
	"packNpmRelationList": [
	   {
	     "packageJsonPath": "./package.json",
	     "miniprogramNpmDistDir": "./dist/wx/"
	   }
	 ],

miniprogramRoot 預設為miniprogram，需要修改為dist/wx/

引入Toast元件

第一步：在app.json配置

	"windows":{
		...
	},
	// 與windows同級
	"usingComponents": {
	   "van-toast": "@vant/weapp/toast/index"
	 },

第二步：.vue檔案引入,template裡面

import Toast from '@vant/weapp/dist/toast/toast'

// 呼叫
	Toast(
		// to done
	)

注意點：

引入完成後會發現以上問題，原因為：template模組裡面無定義，解決如下：

<template>
	<!--這種特殊佔位符是必須有的！-->
    <van-toast id="van-toast"/>
</template>