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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1885 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

第 1 条附言 · 2020-09-01 17:41:43 +08:00

业务逻辑的代码是一模一样的，只有布局和样式上的不同。

Vue

样式

一样

逻辑

22 条回复 • 2020-11-06 09:13:12 +08:00

tutuk5

2020-09-01 16:07:22 +08:00

分 2 套模版，入口就当作 pc 端，判断一下设备类型，mobile 跳转另一套

qq316107934

2020-09-01 16:08:48 +08:00

做响应式就可以了，设置不同页面宽度下具体 grid 占用 col 的数量。

loading

2020-09-01 16:09:01 +08:00 via Android

要求低就弹性布局，要求高不用说啦。

redbuck

2020-09-01 16:11:51 +08:00

让 UI 设计时注意按功能划分区块.

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

不过要注意交互逻辑是否一致.
比如桌面的分页加载,放到移动端一般是上拉加载,这两个加载逻辑不一致,在此基础上的增删改查处理方式也不一致.

lbw

2020-09-01 16:11:55 +08:00

css media query + flex box 或 grid box

murmur

2020-09-01 16:15:51 +08:00

移动端和 pc 端布局可差远了

luckyrayyy

2020-09-01 16:18:39 +08:00

响应式很难驾驭的，多半情况下设计出来是两个端都不太好用....

gloye

2020-09-01 16:40:47 +08:00

vuetify 了解一下

waiaan

2020-09-01 16:45:05 +08:00

@tutuk5 业务逻辑这一块怎么处理？两套都是一样的业务代码。

@redbuck 业务逻辑的代码一模一样，只有布局上的不同，比如移动端表格可能只展示某几列，不用全部展示。

ruoxie

2020-09-01 17:24:20 +08:00 via Android

逻辑复用可以考虑上 hooks

zaul

2020-09-01 17:33:22 +08:00

2 套模板，PC 一套，mobile 一套，根据设备类型跳转

miv

2020-09-01 17:46:57 +08:00 via iPhone

@waiaan 计算属性或者 vif 判断

xianqin

2020-09-01 18:08:50 +08:00

css 媒体查询走一波？

yiyi11

2020-09-01 18:16:35 +08:00 via Android

一套代码，只能移动端优先，然后把 pc 当成“大屏手机”。

darknoll

2020-09-01 18:22:31 +08:00

用 material 风格的组件库吧，移动端和 pc 都适配

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

2020-09-02 02:51:10 +08:00 via iPhone

媒体查询 @media
再加一个移动端查询

KisekiRemi

2020-09-02 02:52:25 +08:00 via iPhone

@KisekiRemi 最好用流行的 ui 库

meteor957

2020-09-02 09:05:02 +08:00

很简单的话就响应式，最好写两套代码

ksice

2020-09-02 10:14:45 +08:00

然后 pc 端还需要适用 ie 浏览器（狗头保命）

Tompes

2020-09-02 21:58:30 +08:00 via Android

media query

zhennann

2020-11-06 09:13:12 +08:00

使用 CabloyJS 全栈框架