一个vue项目同时兼容pc和移动端

项目场景：

vue开发的项目，既有移动端又有pc端，但是移动端和pc端展示的内容不一样，同一个组件样式也不一样，移动端展示内容比pc端少，那这个时候在一个项目种怎么做的？

解决方式：

路由写两份，一份移动端的，一份pc端的，这两份路由地址相同，对应的组件不同，在路由的入口文件里去判断渲染pc的路由还是移动端的路由

代码如下：

router下的index.js文件

import Vue from 'vue';
import Router from 'vue-router';
import routerM from './routerM';
import routerPC from './routerPC';Vue.use(Router);
const ISMOBILE = function () {let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);return flag;
};// 创建路由实例
const router = new Router({mode: 'history',base: process.env.BASE_URL,fallback: false,// 这里判断后选择使用移动端的路由还是pc端的路由routes: ISMOBILE() ? routerM : routerPC,
});export default router;

router下routerM.js和routrPC.js代码：

可以看出是写了两份组件，导入组件时文件路径只有pc和mobile两个单词的区别，

所以说，也可以将路由写一份，中间的用变量来代替~~

同样的，当样式需要写两份的时候，也可以在main.js中按需引入

// 是否为手机端
const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);// PC端和移动端的公共样式
import '@public/css/common.less';
// 移动端引入公共样式
if (flag) {require('@/assets/css/mobileCommon.less');
}

一个vue项目同时兼容pc和移动端相关推荐

[vue] 从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织
[vue] 从0到1自己构架一个vue项目,说说有哪些步骤.哪些重要插件.目录结构你会怎么组织 1 项目类型前端的项目目前来看主要分为小程序开发,H5页面开发.PC官网.后台管理系统开发.Nativ ...
Vue手把手带你入门(一) nodejs安装配置以及vue-cli脚手架创建第一个vue项目（超级详细）
开发Vue程序的第一步就是PC安装配置node.js 1官网下载安装Node(我的安装路径是D:\nodejs\) 点我安装(安装在除C盘外任意一个磁盘中) 2 检查node和npm是否安装完成下载 ...
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
vue请求在退出页面还执行吗_如何用 Cloudbase Framework 部署一个 Vue 项目
无需修改业务代码,就能将 Vue 应用前后端一键托管部署在云开发平台~ Cloudbase Framework 是云开发官方出品的前后端一体化部署工具.目前已经开源 . 关于 Cloudbase F ...
vue项目编写html,从头搭建、编写一个VUE项目
一.创建VUE项目 1.新建一个vue项目进入工作目录,新建一个vue项目:vue init webpack 项目名 vue init webpack vue-project-demo image. ...
在ubuntu上启动一个vue项目
在ubuntu上启动一个vue项目本地: npm install npm run dev npm run build 然后发现报错,大面积报错,原来是被npm给墙了经过 npm install - ...
VsCode创建第一个vue项目
转载自:https://www.cnblogs.com/z45281625/p/9015380.html VsCode创建第一个vue项目使用vue-cli快速构建项目 ( vue-cli 是vu ...
使用VSCode创建一个Vue项目
使用VSCode创建一个Vue项目 vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v //( ...
MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目一.安装node环境二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目三.vu ...
多个vue项目合并成一个_零基础搭建一个Vue项目，你学会了吗？
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...

一个vue项目同时兼容pc和移动端

项目场景：

解决方式：

一个vue项目同时兼容pc和移动端相关推荐

最新文章

热门文章