likes
comments
collection
share

在vue已有电脑端页面基础上加入移动端页面

作者站长头像
站长
· 阅读数 313

场景:写好了管理系统网页端,突然需求加入对应的移动端页面

通俗就是:我们用vue写了一个网页项目,然后临时加入一个移动端项目,同一个项目,同一套代码

  • 加入移动端项目如果用原生的js去写或者用vue的网页UI框架去写样式都会在现实中遇到困难,网页的UI不适合移动端的UI
  • 这时候可能会说用rem去转换px不就可以了吗,我想说的是如果构建项目的时候你用到了rem,这里过渡可以很自然,但是刚开始你没用rem,这里强去转换有点勉强
  • 对于简洁的vue,我找的是vue对应的简洁的移动端UI - Vant,对用习惯了的element或者iview来说去看vant的使用,会感觉到很舒服!
  • vant的地址:

    https://vant-contrib.gitee.io/vant/v2/#/zh-CN/list

  1. 举个常见例子,移动端你遇到要分页的数据,原生要自己监听滑到底部,vant则提供了免费的组件vant-list去给你用,写对传参即可
  2. 还比如移动端的时间组件怎么写,原生吗,van-datetime-picker帮你解决
  • 在同项目里创建新文件夹写移动端,package.json里加入vant,可以同时和element等使用,这并不会冲突,而且这时候用的还是px不需要强转rem

谢谢 !