vue 后端管理框架模板
程序员文章站
2022-07-04 19:26:41
自己的项目需要一个后端管理框架,于是在网上找了一堆,但是发现其他的功能都很丰富,但是自己用不上,我就需要一个简单的框架,页面内容自己搭建,所以自己借鉴其他优秀的模板样式,花了一天手撸了一个简单的架构出来,方便自己以后使用vue管理后台前端框架纯vue编写,页面简单,功能实用,入手无门槛实现功能路由中间件面包屑导航栏全局路由与子路由互相跳转效果展示demo地址http://admin.zozoo.net/home中间件设置/src/router/index.js//路由中间...
自己的项目需要一个后端管理框架,于是在网上找了一堆,但是发现其他的功能都很丰富,但是自己用不上,我就需要一个简单的框架,页面内容自己搭建,所以自己借鉴其他优秀的模板样式,花了一天手撸了一个简单的架构出来,方便自己以后使用
vue管理后台前端框架
纯vue编写,页面简单,功能实用,入手无门槛
实现功能
- 路由中间件
- 面包屑导航栏
- 全局路由与子路由互相跳转
效果展示
demo地址
项目地址
https://github.com/ganganlee/vueAdminLayout.git
中间件设置
/src/router/index.js
//路由中间件
route.beforeEach((to,from,next)=>{
let token = $cookies.get('token');
//验证用户是否登陆
if(!token && to.path !== '/login'){
next('/login');
}else {
next();
}
});
路由设置
/src/router/index.js
菜单栏设置(子菜单设置完成后,还需设置路由才能完成跳转)
/src/components/Index.vue
服务器配置
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
本文地址:https://blog.csdn.net/weixin_44540711/article/details/109616019
上一篇: vue 组件化综合案例demo
下一篇: 我是怎样靠公众号赚到第一个10000元的
推荐阅读
-
[Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之九如何进行用户权限控制
-
ABP开发框架前后端开发系列---(11)菜单的动态管理
-
简单了解Vue + ElementUI后台管理模板
-
Vue+ElementUI的后台管理框架
-
ABP开发框架前后端开发系列---(9)ABP框架的权限控制管理
-
ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一)
-
Vue的Flux框架之Vuex状态管理器
-
ABP开发框架前后端开发系列---(7)系统审计日志和登录日志的管理
-
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理