nuxt3 pc、移动端布局布局切换

nuxt3 pc、移动端布局布局切换

如果你想要开发一套企业官网，pc端移动端差距较大，并需要适配pc端和移动端可以考虑使用nuxt3去做

优点

• vue语法
• 不同端，不同页面都是一个组件，互不影响，开发方便
• 页面组件都是懒加载的，访问速度有保障
• pc、移动切换流畅

缺点

• 移动端和pc端每个页面各写一份肯定有冗余

所以也可以考虑 媒体查询 或从定向的方式

页面效果

如果你还不了解nuxt3，请先到下面的链接中查看

Nuxt3中文网

了解nuxt3基本知识后，可以下载dom到本地

demo地址

思路分析

首先，用户请求服务器，nuxt判断当前环境为PC或移动端，若为PC端，则返回PC端所有文件，当屏幕缩小到690px下加载移动端的文件，当点击跳转到about链接按钮，加载MbAbout.vue文件；整个页面都是懒加载的。

app.vue

首先app.vue文件为程序入口文件，在app.vue中process.server表示只在服务端处理，既在服务端的时候通过useRequestHeaders获取请求头，并通过deviceType方法判断了请求类型，最后用useState方法保存了全局相应状态lauyou。同时app.vue文件还监听resize事件，更新layout状态。

layouts

我们以pc端的layout文件为例，layout文件主要存放页面的公共部分，如页眉页脚等内容，而每个页面会插入到slot插槽中，注意可以把页眉页脚也作为组件封装出去，这样会更简洁。

pages

这里以首页的page为例，首先懒加载的引入了PcBanner和MbBanner组件并通过全局状态useState("layout")切换不同的页面

components/pc

做完上面的操作就可以编写每页具体的代码了，pc端代码放到components/pc下面移动端同理

最后了解下其他适配方案

js+media

通过js监听resize事件判断元素显示隐藏，通过@media判断

优点： css媒体查询切换更流畅
缺点：需要适配很多样式，开发速度慢

服务器重定向

写两套代码，部署两个url，服务器根据请求头进行判定

例如: .shouye.cn 和 m.shouye.cn.

优点: 开发速度比js+media快
缺点: 两套代码、只有第一次重定向，无法在页面内切换。

有什么方法既能保证开发速度，又能有较好的效果呢?可以试下nuxt3