vue开发项目(PC端和移动端共用一套代码)(一)
vue项目,编写一套代码,实现pc端与移动端兼容。具体实现,编写两套代码,通过路由加载不同端的文件......
·
编写两套代码,通过路由加载不同端的文件
1、创建vue项目
2、基本配置
2.1、html设置
① 创建两端的vue文件
② 在App.vue中,添加:
2.2、路由设置
在router文件夹下,创建m、pc两个文件夹,路径如下:
router/m/index.js内容如下:
router/pc/index.js内容如下:
router/index.js使用默认值,不修改
2.3、main.js设置
① 在src路径下,创建文件:utils/index.js,内容如下:
// 判断设备是否为移动端的方法
export const isMobile = () => {
return /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(
navigator.userAgent
)
}
② 在src路径下,创建init.js文件
import router from './router'
import { isMobile } from './utils'
import { mobileRoutes } from './router/m'
import { pcRoutes } from './router/pc'
console.log(mobileRoutes)
// 判断当前设备的型号从而改变当前路由
router.addRoute(isMobile() ? mobileRoutes[0] : pcRoutes[0])
③ 在vue项目的入口文件main.js文件中引入init.js。
结果如下:
pc端:
移动端:
更多推荐
已为社区贡献3条内容
所有评论(0)