同一个vue3项目在移动端，PC端，小程序上运行，做什么调整？

Question

一个vue3的移动端项目，怎么把其中的几个页面改成PC端的呀？只把那几个页面单独拿出来根据稿图改样式吗？还是怎么改啊？还有，如果把整个项目还要做小程序版的，那需要考虑哪些方面？做哪些调整？

Answer 1

移动端项目适配PC端可以使用响应式布局（利用媒体查询、栅格布局、flex等）来针对不同的屏幕做不同的布局；也可以对PC端单独写一套页面，然后利用JS监听设备屏幕宽度，根据设备屏幕大小选择渲染移动端的页面还是PC端的页面（vue中可以利用导航守卫，在路由跳转前判断需要渲染什么页面，也可以在组件的setup生命周期中判断渲染什么子组件）。

而整个项目改成原生小程序版是比较麻烦的，建议先转成uniapp（ vue转uniapp教程https://ask.dcloud.net.cn/article/36174），uniapp配合HBuilderX开发工具能将项目一键转成小程序版的