一个项目适应于移动端与pc端

为什么要一个项目适应移动端与pc端呢

1.为了节约成本

像我们很多初创公司，以及一些小公司没有那么多的经济来用来开发2个项目，更没有那么多的经历去同时维护2个项目

2.为了良好的用户体验

假如我们已经很熟练的使用移动端中的一个软件，当我们在电脑上打开的时候当然都想和在移动端上打开的是一样的（起码业务逻辑，按钮摆放位置之类的希望一样）

如何实现

实现的方法我们目前有2种

媒体查询

优点：适用于小型网页，用户交互较少的项目，代码用量较少；
缺点：在页面内容过多，用户交互过多的时候，如果通过 @media 来一个个改的话，那代码量可就很多了，而且也不方便维护。因此需要另一种方式来解决这个问题。

通过判断打开设备的类型，区分需要显示的方式和界面

使用window.navigator.userAgent来区分打开的设备，在使用2套代码来实现这个移动端与pc端的适应的效果实现

模拟第二种方法实现

首先在src文件夹下面创建文件夹framework，在其下面有2个文件夹分别为mobile&&PC，其里面的结构为

1587364576(1).png

其中的js文件取代了原本的main.js，html取代原本的index.html，APP.vue取代原项目的APP.vue
在router文件夹下面创建mobile&&PC文件夹，里面各有一个index.js，内容分别为
mobile/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/mobile/HelloWorld'
// import MobilePage from '@/components/mobile/mobilePage'

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

/**
 * 验证
 */
router.beforeEach((to, from, next) => {
  if (!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = '/p_index.html#/'
    return
  }
  next()
})

export default router

pc/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/pc/HelloWorld'
import SecondPage from '@/components/pc/secondPage'

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/secondPage',
      name: 'secondPage',
      component: SecondPage
    }
  ]
})

/**
 * 判断是否为移动设备，是，则跳转到移动端的路径
 */
router.beforeEach((to, from, next) => {
  if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = '/m_index.html#/'
    return
  }
  next()
})

export default router

这样就实现了一个简单的pc端移动端适配，菜鸟一枚，有啥错误欢迎指正。