?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?)
? ? ? ? 主要原因是因为自动转换字体处理这一块有影响:
?这样我们的组件就可以使用了.
?