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