移动端和pc端做适配

• 场景1

移动端和pc端风格类似，内容可复用：

直接媒体查询  @media screen and (max-width: ***px)； 根据屏幕大小设置样式

• 场景2
  

风格差别比较大，内容不可复用，但接口可复用；

放在同一工程下，新建手机端文件夹，编写相应路由。

在app.vue页面编写，根据打开页面的机器来判别选择跳到不同的路由下。

    computed: {
        _isMobile () {
            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);
            return flag;
        }
    },

在app.vue 页面内区分调到不同页面：

    mounted () {
        // 移动端 跳转到对应路径
        if (this._isMobile) {
            this.$router.replace('/phone');
        } else {
            // 否则默认跳转首页
            this.$router.replace('/');
        }
    }