mpvue微信小程序开发总结（二）--- vant-weapp组件

使用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>