V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
waiaan
V2EX  ›  Vue.js

用 vue 开发一个项目,需要同时适应 pc 和移动端。

  •  
  •   waiaan · 2020-09-01 15:41:01 +08:00 · 5902 次点击
    这是一个创建于 1523 天前的主题,其中的信息可能已经有所发展或是发生改变。

    业务逻辑都是一样的,只有页面布局和样式不一样,这种要怎么处理? 谢谢。

    第 1 条附言  ·  2020-09-01 17:41:43 +08:00
    业务逻辑的代码是一模一样的,只有布局和样式上的不同。
    22 条回复    2020-11-06 09:13:12 +08:00
    tutuk5
        1
    tutuk5  
       2020-09-01 16:07:22 +08:00
    分 2 套模版,入口就当作 pc 端,判断一下设备类型,mobile 跳转另一套
    qq316107934
        2
    qq316107934  
       2020-09-01 16:08:48 +08:00
    做响应式就可以了,设置不同页面宽度下具体 grid 占用 col 的数量。
    loading
        3
    loading  
       2020-09-01 16:09:01 +08:00 via Android
    要求低就弹性布局,要求高不用说啦。
    redbuck
        4
    redbuck  
       2020-09-01 16:11:51 +08:00
    让 UI 设计时注意按功能划分区块.

    然后媒体查询实现一个布局组件,业务组件统统用布局组件包起来.

    不过要注意交互逻辑是否一致.
    比如桌面的分页加载,放到移动端一般是上拉加载,这两个加载逻辑不一致,在此基础上的增删改查处理方式也不一致.
    lbw
        5
    lbw  
       2020-09-01 16:11:55 +08:00
    css media query + flex box 或 grid box
    murmur
        6
    murmur  
       2020-09-01 16:15:51 +08:00
    移动端和 pc 端布局可差远了
    luckyrayyy
        7
    luckyrayyy  
       2020-09-01 16:18:39 +08:00   ❤️ 3
    响应式很难驾驭的,多半情况下设计出来是两个端都不太好用....
    gloye
        8
    gloye  
       2020-09-01 16:40:47 +08:00
    vuetify 了解一下
    waiaan
        9
    waiaan  
    OP
       2020-09-01 16:45:05 +08:00
    @tutuk5 业务逻辑这一块怎么处理?两套都是一样的业务代码。

    @redbuck 业务逻辑的代码一模一样,只有布局上的不同,比如移动端表格可能只展示某几列,不用全部展示。
    ruoxie
        10
    ruoxie  
       2020-09-01 17:24:20 +08:00 via Android
    逻辑复用可以考虑上 hooks
    zaul
        11
    zaul  
       2020-09-01 17:33:22 +08:00
    2 套模板,PC 一套,mobile 一套,根据设备类型跳转
    miv
        12
    miv  
       2020-09-01 17:46:57 +08:00 via iPhone
    @waiaan 计算属性或者 vif 判断
    xianqin
        13
    xianqin  
       2020-09-01 18:08:50 +08:00
    css 媒体查询走一波?
    yiyi11
        14
    yiyi11  
       2020-09-01 18:16:35 +08:00 via Android
    一套代码,只能移动端优先,然后把 pc 当成“大屏手机”。
    darknoll
        15
    darknoll  
       2020-09-01 18:22:31 +08:00
    用 material 风格的组件库吧,移动端和 pc 都适配
    sunzongzheng
        16
    sunzongzheng  
       2020-09-02 00:17:19 +08:00
    做个入口组件?

    export default {
    component: {
    PC: require.ensure('xx') // 懒加载
    H5: require.ensure('xx') // 懒加载
    },
    render(h) {
    if(pc) return h('PC')
    else return h('H5')
    }
    }
    KisekiRemi
        17
    KisekiRemi  
       2020-09-02 02:51:10 +08:00 via iPhone
    媒体查询 @media
    再加一个移动端查询
    KisekiRemi
        18
    KisekiRemi  
       2020-09-02 02:52:25 +08:00 via iPhone
    @KisekiRemi 最好用流行的 ui 库
    meteor957
        19
    meteor957  
       2020-09-02 09:05:02 +08:00
    很简单的话就响应式,最好写两套代码
    ksice
        20
    ksice  
       2020-09-02 10:14:45 +08:00
    然后 pc 端还需要适用 ie 浏览器(狗头保命)
    Tompes
        21
    Tompes  
       2020-09-02 21:58:30 +08:00 via Android
    media query
    zhennann
        22
    zhennann  
       2020-11-06 09:13:12 +08:00
    使用 CabloyJS 全栈框架
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1396 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 17:32 · PVG 01:32 · LAX 10:32 · JFK 13:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.