zoukankan      html  css  js  c++  java
  • 开发RTSP/RTMP/GB28181/海康SDK/EHome视频融合平台EasyCVR,使用vue-cli3项目搭建多页面模式的方法

    vue同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全。倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话:

    Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。

    TSINGSEE青犀视频团队研发的视频平台大多都是基于vue架构的,大家感兴趣的话可以阅读下《流媒体服务器前端展示框架vue封装api接口流程介绍》一文。本文我们来讲一下我们开发RTSP/RTMP/GB28181/海康SDK/EHome视频融合平台EasyCVR的时候,使用vue-cli3项目搭建多页面模式的方法。

    (1)创建一个登陆页面的html文件
    在项目的public文件夹创建一个login.html,将index.html的内容复制过来,将需要改的title和id改成login就行了

    (2)在src文件夹下创建一个login文件夹,分别创建login.main.js、login.router.js、login.vue三个文件

    login.main.js:仿照main.js
    import Vue from 'vue';
    import login from './login.vue';
    import router from './login.router';// import store from './store';
    Vue.config.productionTip = false;new Vue({  
        router,  
        render: h => h(login),
    }).$mount('#login');
     
    login.router.js(仿照router.js)
    import Vue from 'vue';
    import Router from 'vue-router';
     
    Vue.use(Router);
     
    export default new Router({  
        routes: [
            {
                path: "/",
                name: "home",
                component: () =>
                  import(/* webpackChunkName: "home" */ "../views/Home.vue"),
                meta:{
                  title:"首页"
                }
            },
        ],
    });
     
    login.vue(仿照App.vue)
    <template>    
        <div id="login"><router-view></router-view>
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
            }
        }
    }
    </script>
    <style scoped>
     
    </style>
    

      

    (3)配置vue.config.js

    在module.exports里加上入口配置:

    pages: {//配置多页面入口        
          login: {          
            entry: 'src/login/login.main.js',          
            template: 'public/login.html',        
          },        
          index: {          
            entry: 'src/main.js',          
            template: 'public/index.html',        
          },    
        },
    

      

    最后访问localhost:port/login.html/#/就可以了

    多页面配置适合一个项目需要有多套路由规则的环境,例如我们EasyNVR的后台管理系统开发,要访问后台管理系统,一定要在首页或者配置页登录账号才可。但是假如有一个页面需要分享出去,被人去访问,此时就可以配置一个多页面模式,在分享的时候,取消了用户登录这类繁杂的机制,分享更为便捷。

    如果大家想详细了解视频监控可视化服务,可以联系我们咨询,除EasyNVR外,还有EasyGBS、EasyDSS、EasyCVR等解决方案,欢迎大家到TSINGSEE青犀视频进行了解或咨询!

     
  • 相关阅读:
    为什么你改了我还看不见?
    一条SQL更新语句是如何执行的?
    一条SQL查询语句是如何执行的?
    为什么学习mysql
    读书并不只是向一个方向前进——《代码之外的生存指南》
    RabbitMQ在C#中的使用
    RFID技术与条形码技术的对比
    射频识别技术RFID
    通过IIS不能连接远程数据库的问题
    老板不断加需求、改需求的四种应对方法
  • 原文地址:https://www.cnblogs.com/EasyNVR/p/13606573.html
Copyright © 2011-2022 走看看