构建单页应用的免编译后台管理模板(简)

构建单页应用的免编译后台管理模板

（Bootstrap4+vue+vue-router）

单页应用(single page web application，SPA)的实践越来越多，尤其是vue-router的流行，如虎添翼，SAP的设计、开发更简单。本文只探讨vue全家桶的研发方案。Vue-cli配合npm+webpack是官网推荐的，下文统一使用vue-cli统称该研发方案。
Vue-cli在实践中随着业务页面的增多（现在有400多个.vue文件，以后还会增加），使用npm编译、发布的时间越来越长。尤其是在测试阶段，修改问题后，得浪费大量的时间等着编译、发布。已经找到对应的解决方案。
对于严格划分前后端岗位的研发团队，前端的编译、发布不失为最佳开发、管理方案。但是在测试阶段解决问题时，区分不清前后端问题、配合不流程时，研发团队中的多能手不由自主就要前后端一起“看”。这个时候vue-cli的方式就显的“累赘”。
经过一段时间的摸索、验证，完成了构建单页应用的免编译后台管理模板的技术方案，和普通的html差不多。
本方案使用bootstrap4+vue+vue-router实现，并且支持多标签。本方案的核心是对路由的控制。
后台管理的主页面

核心代码：

单页组件的模板：

总结：
1、 单文件组件(.vue)采用html文件保存（不需要编译），html文件中必须在中编写html，然后使用var uiIndex = Vue.extend({……});定义组件；
2、 注意：script的id必须是全局唯一，否则动态添加路由后跳转不正确；
3、 点击菜单项时，使用jquery的load加载单文件组件文件到主文件的标签中,同时动态添加路由。