开发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青犀视频进行了解或咨询!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 35.Python字符串格式运算符%
- 好一个 Spring Boot 开源在线考试系统!解决了我的燃眉之急
- OC基础--数据类型与表达式
- OC基础--字符串
- 编写优雅的 commit message 并自动生成 changelog
- RL实践2——RL环境gym搭建
- 【Java面试总结】多线程
- RL实践1——动态规划值迭代
- RL实践3——为Agent添加Policy
- CentOS 快速安装Python3和pip3
- Linux使用 常见经验和技巧总结
- SwiftUI:辅助功能——简单介绍
- Xshell突出显示集
- samba服务安装脚本
- 【Vue.js】Vue.js组件库Element中的树形控件、分页、标记、头像和警告