一、新建uniapp 项目
主要注意两个步骤:A、选择模板;B、Vue版本选择
在演示中,我们创建的是默认模板和vue2。
二、运行项目
初始化项目之后,先运行一次项目。检测一下项目是否初始化成功。编译成功后,会自动打开项目的首页。
三、安装vant组件
这一步其实有两种方式:
A、npm i @vant/weapp -S --production
B、直接下载vant 组件的方式
https://gitee.com/vant-contrib/vant-weapp
以下我们演示的也是从gitee下载vant组件进行引用的方式。如何下载我们就不讲了,小伙伴们自行下载。下载完成,解压出对应的文件夹后,找到dist文件夹。
a、在项目根目录创建文件夹为wxcomponents
b、将解压后的dist 文件夹复制到wxcomponents目录中,并修改文件夹名称为 vant
四、引用vant组件
A、在App.vue文件中引用vant 样式文件
@import './wxcomponents/vant/common/index.wxss'
B、在pages.json文件中引用vant组件
"usingComponents": {
"van-button": "/wxcomponents/vant/button/index"
}
五、运行编辑项目
做完以为设置之后,点击:运行-运行到浏览器-(选择你所需要打开的浏览器)
六、处理编译中的错误
在编译运行中,会出现以下错误。解决方案操作如下:找到 wxcomponents/vant/icon/index.wxss 文件,右健-重排代码格式-保存,再重新编译即可。
七、初始化项目分享,接下来有关uniapp+vant的一个案例均在此git项目中分享给大家。感谢小伙伴们的阅读、关注、点赞、转发。
https://github.com/fxndesign/uniapp-vant