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青犀视频进行了解或咨询！
