nuxt3 pc、移动端布局布局切换
如果你想要开发一套企业官网，pc端移动端差距较大，并需要适配pc端和移动端可以考虑使用nuxt3去做，使用nuxt3的优点和效果
- vue语法
- 不同端，不同页面都是一个组件，互补互不影响，开发方便
- 页面组件都是懒加载的，访问速度有保障
- pc、移动切换流畅
如果你还不了解nuxt3，请先到下面的链接中查看
了解nuxt3基本知识后，可以下载dom到本地
思路分析
首先，用户请求服务器，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