uniapp开发小程序引入vant-weapp流程

 1. 首先创建项目

 2. 在项目中新建文件夹( wxcomponents )与pages平级.

3. 打开 GitHub ,搜索 vant-weapp ,通过  git clone https://github.com/vant-ui/vant-weapp.git

 下载 vant-weapp文件

 4. 将 vant-weapp 文件中的 dist 文件夹复制到  wxcomponents 文件夹里面,把dist文件重命名为vant

5. 由于我们一个一个引入组件比较麻烦,我们可以在 uniapp官网中的全局文件中搜索 easycom ,通过easycom配置批量引入,

"easycom": {
	  "autoscan": true,
	  "custom": {
		  "van-(.*)": "@/wxcomponents/vant/$1/index.vue"

          // 这里ui开头都是vant  括号中的 .* 表示任意字符  用$1 来获取到那个任意字符

	    // "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
	    // "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
	  }
	}

 6. 我们在页面中引入一个 vant组件测试

 此时我们运行会报错!!!

 最简单测处理方法: 

        我们只需到把 wxcomponents文件夹=>vant文件夹=>icon文件夹=>index.wxss文件格式化一下( HBuilder X 默认格式化快捷键: Ctrl+Alt+L )

        主要原因是因为自动转换字体处理这一块有影响:

 这样我们的组件就可以使用了.