以前使用uniapp开发APP一直搭配的是uView,但是在用vue做移动端开发时又搭着vant。这两个UI库感觉得都挺不错的,虽然外观朴素了些,但是功能还是够用的。
话说很久没用过uniapp了,这就来试试uniapp的vue3搭配vant,看看能碰撞出怎样的火花⚡️
vant weapp貌似没有List组件,不过没关系,列表我喜欢用mescroll,足够强大了。
-
新建uni-app项目,Vue版本选择
3
npm i @vant/weapp -S --production
-
在项目根目录下新建文件夹wxcomponents,在其下新建目录vant。
在node_modules中找到下图对应位置,把dist下的文件都拷贝到刚才新建的
wxcomponents/vant目录中。
- 在pages.json引入vant组件van-button
6. 在页面中使用van-button
<van-button type="primary">van-button</van-button>
- 运行到微信小程序,查看页面
OK,一个简单的架子有了,明天可以愉快的开发页面了。
后续: 我觉得不太愉快,还是换回uview了 💔
使用uniapp开发安卓和IOS,尝试使用uni的vue3版本搭配vant4,可惜IOS模拟器动不动白屏,或者tabbar不显示。
为了稳定,换回了vue2+uView2,稳定交付才是最重要的。