vue 后端管理框架模板
程序员文章站
2022-04-06 08:04:54
自己的项目需要一个后端管理框架,于是在网上找了一堆,但是发现其他的功能都很丰富,但是自己用不上,我就需要一个简单的框架,页面内容自己搭建,所以自己借鉴其他优秀的模板样式,花了一天手撸了一个简单的架构出来,方便自己以后使用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
上一篇: 面试相关:Mysql千万级数据分页
下一篇: “黑五”的本土化难题,如何定位、立足?
推荐阅读
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之七使用JWT生成Token(个人见解)
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之十一Swagger使用一
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之十数据库基础方法的封装
-
[Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之九如何进行用户权限控制
-
ABP开发框架前后端开发系列---(11)菜单的动态管理
-
简单了解Vue + ElementUI后台管理模板
-
Vue+ElementUI的后台管理框架
-
ABP开发框架前后端开发系列---(9)ABP框架的权限控制管理
-
ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一)