最近打算系统的把vue项目跑一跑，之前做项目总是站在巨人的肩膀上，老大项目搭建好，自己写页面就好了，想想确实没有挑战性，今天呢就立个flag以vue项目为例，自己完整的搭建一个项目。
这篇文章是最最基本的，以vue+elementUi+vueRouter来实现简单的后台管理系统整体布局。这里没有考虑菜单权限是放在前端还是后台，更没有考虑登录之后请求接口存储等等一系列问题，你猜的没错，就是一个单纯的静态菜单切换架子，大神请绕路。那就先展示效果吧。
后台管理系统架子
此项目使用vue-cli脚手架搭建起来，不记得的同学按照vue官网https://cli.vuejs.org/zh/guide/cli-service.html
操作就好了，首先贴一下此次项目的目录机构，因为只是简单的静态搭建，所以没有细致介绍，将会在后期随着项目的完善逐步更新。
vue目录结构
搭建这个架子的初衷就是体验借助vueRouter快速构建单页面应用。我们在平时的开发需求中，经常会有这种左侧导航栏，右侧内容的需求，对于这样的布局，我们采用在router的js配置中，声明layout路由，并将菜单路由作为layout的子路由，这样在layout组件里我们通过使用router-link给菜单赋值不同的组件从而实现切换效果。
这其实就是实现这个架子的最基本思路，当然了实际项目肯定不是这么简单，不过万变不离其宗，知道了方法，根据自己的实际项目需求，登录后判断、存储用户信息、对菜单权限控制以及菜单的种种设置需求都是在此基础上丰富的。
好了废话不说，上代码吧
请访问github：https://github.com/LeannaLady/vueDemo （备注：在baseLayout_1011分支）
网友评论