uniapp的h5端和微信小程序项目中引入vant

通过命令行vue/cli创建项目 

vue create -p dcloudio/uni-preset-vue 项目名

h5端

引入vant # Vue 2 项目

npm i vant@latest-v2

在main.js中

import Vant from "vant" 
Vue.use(Vant) 

 然后在App.vue中的style中引入

<style> 
/*每个页面公共css */ 
@import 'vant/lib/index.css' 
</style> 

最后就可以在.vue文件的template中使用了。

微信小程序端

引入小程序版本vant-Weapp

 1、在src下与pages同级新建文件夹wxcomponents/vant/dist文件夹

 2.前往github.com/youzan/vant… 将该项目的dist文件夹替换步骤1的dist文件夹

3.App.vue的style中引入样式

 @import “/wxcomponents/vant/dist/common/index.wxss”;

 4.使用:在pages.json中当前页面中使用引入相应的组件，下面以要使用search组为例 

"usingComponents":{ 
    "van-search": "/wxcomponents/vant/dist/search/index",
},

 也可以在全局的globalStyle中引入

"globalStyle": {    "usingComponents":{         "van-button": "/wxcomponents/vant/dist/button/index"    }     },

5、最后就可以在.vue文件的template中使用了。