該方法只適合在h5端,也不建議微信小程序在uni-app中使用vant(BUG非常多,特別是每次更新HbuilderX的時候),如果你實在想小程序在uni-app中使用vant,可以用uni-app的插件市場的Vant UI Demo For Uni-app
1.前往github下載vant-weapp組件庫,github地址
2.在HBuilderX中新建uni-app項目,並在新項目的根目錄下新建個目錄,用於存放vant-weapp組件,我新建的目錄名爲wxcomponents爲例
3.將步驟1的dist文件複製粘貼到wxcomponents目錄下,並改名爲vant
4.使用uni-app提供的easycom組件模式,具體看uni-app文檔
5.將自定義easycom配置示例複製粘貼到pages.json中,並修改
這一步可不看
解讀: (.)代表任意字符,則"van-(.)"是對應組件名,而$1是獲取(.)
例子: “van-button”,$1獲取(.),則$1=button
而$1/後面的index.vue,打開vant下的button目錄,發現並沒看到index.vue,
別急,當你編譯運行的時候,uni-app和HBuilderX會幫你自動生成的.
編譯前:
編譯後:
6.然後前往page/index/index.vue寫一個vant-button的組件
7.點擊運行到chrome,注意先運行到瀏覽器
8.發現報了一堆錯,不要慌
9.複製url(https://img.yzcdn.cn/vant/vant-icon-d3825a.woff),在want下通過字符串搜索
10.原來是",url"的,後面沒有空格,即", url",需要添加上空格
11.停止運行,然後再次運行,因爲需要重新編譯,然後就成功了
另一個方法,在步驟9查找到目標文件時,右鍵執行重排代碼,也能成功
一些網友遇到的問題:
1.編譯不生成.vue
有可能是編譯器的版本問題,我的是2.6.8.20200330版本.那麼你可以用HBuilder X的內置瀏覽器編譯下,就會生成.vue了