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

[waiaan]

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

[tutuk5]

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

[qq316107934]

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

[loading]

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

[redbuck]

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

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

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

[lbw]

css media query + flex box 或 grid box

[murmur]

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

[luckyrayyy]

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

[gloye]

vuetify 了解一下

[waiaan]

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

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

[ruoxie]

逻辑复用可以考虑上 hooks

[zaul]

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

[miv]

@waiaan 计算属性或者 vif 判断

[xianqin]

css 媒体查询走一波？

[yiyi11]

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

[darknoll]

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

[sunzongzheng]

做个入口组件？

export default {
component: {
PC: require.ensure('xx') // 懒加载
H5: require.ensure('xx') // 懒加载
},
render(h) {
if(pc) return h('PC')
else return h('H5')
}
}

[KisekiRemi]

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

[KisekiRemi]

@KisekiRemi 最好用流行的 ui 库

[meteor957]

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

[ksice]

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