1. 项目介绍

一个基于Vue2.0的多页面应用系统。

技术栈包含:Vue、VueX、Vue Router、Element UI。

2. 功能介绍

2.1 多页面切换功能

说明:采用 tabs  + router-view 组合来保存各个页面。

<main class="mpa-layout-main">
<!-- tabs -->
<el-tabs>
....
</el-tabs>
<!-- view -->
<div class="mpa-layout-main__view">
<keep-alive :include="menuNameList">
<router-view />
</keep-alive>
</div>
</main>

1)结构说明

2) keep-alive

说明:使用 keep-alive 可以缓存各个页面(页面也属于组件)的状态。

注意: keep-alive 要求被切换到的页面都有自己的名字,所以页面组件设置了 name 属性才会被缓存。

export default {
name: 'studentMgt',
...
}

3) 菜单切换效果

2.2 主题切换

说明:使用scss和css3的颜色变量来实现主题色切换。

1) 样式结构

// index.scss

@import './normalize.css';
@import './global.css'; // theme
@import './theme/theme-classic.scss';
@import './theme/theme-red.scss'; // base app
@import './baseApp.scss';

2) 主题切换效果

2.3 express

说明:系统内置了一个express,运行faker.js(类型mock.js)来模拟数据。

3. 开源地址

githubhttps://github.com/polk6/vue2-admin-mpa

End
菜单加载中...

vue2-admin-mpa vue2多页面应用系统【开源项目】的更多相关文章

  1. NET权限系统开源项目

    http://www.cnblogs.com/yubaolee/p/OpenAuth.html http://www.cnblogs.com/guozili/p/3496265.html Sereni ...

  2. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  3. 页面注册系统--使用forms表单结合ajax

    页面注册系统--使用forms表单结合ajax 在Django中通过forms构建一个表单 1.urls.py 配置路由 from django.conf.urls import url from d ...

  4. 与众不同 windows phone (27) - Feature(特性)之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏

    原文:与众不同 windows phone (27) - Feature(特性)之搜索的可扩展性, 程序的生命周期和页面的生命周期, 页面导航, 系统状态栏 [索引页][源码下载] 与众不同 wind ...

  5. DoNet开源项目-基于Amaze UI的点餐系统

    帮朋友做的点餐系统,主要是为了让顾客在餐桌上,使用微信扫描二维码,就可以直接点菜,吃完使用微信付款. 系统演示地址,账户名和密码均为:admin.(请不要删除admin用户) GitHub Clone ...

  6. 讲解开源项目:5分钟搭建私人Java博客系统

    本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和运行 Tale 项目.示例均在 Windows 操作系统下演示 本文作者:HelloGitHub-秦人 HelloGitHub 推出的< ...

  7. Halo 开源项目学习(四):发布文章与页面

    基本介绍 博客最基本的功能就是让作者能够自由发布自己的文章,分享自己观点,记录学习的过程.Halo 为用户提供了发布文章和展示自定义页面的功能,下面我们分析一下这些功能的实现过程. 管理员发布文章 H ...

  8. 吉特仓储管系统(开源WMS)--分享两月如何做到10W+的项目

    在此文开篇之处先特别申明,此文在有些人的眼中会有广告的嫌疑,但是本人不想将其作为一个广告宣传的文章,在此提到软件内容部分请大家予以谅解和包含,作为时间不算短的程序员给大家分享一些自己开发吉特仓储管理软 ...

  9. 学霸系统UI项目功能说明书 v1.0版本

    发布人员:软件工程实践小队. 发布内容:学霸系统UI项目说明书. 版本:学霸v1.0版本. 学霸系统UI项目说明书 v1.0版本分为以下部分: Part 1:用户须知: Part 2:功能实现: Pa ...

随机推荐

  1. dedecms织梦调用指定文章id

    {dede:arclist idlist="1349"  channelid="1" addfields="date,city"} idli ...

  2. django ORM教程(转载)

    Django中ORM介绍和字段及字段参数   Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简 ...

  3. P5404-[CTS2019]重复【KMP,dp】

    正题 题目链接:https://www.luogu.com.cn/problem/P5404 题目大意 给出一个字符串\(S\),然后求有多少个长度为\(m\)的串\(T\)满足.无限多个串\(T\) ...

  4. 【SpringBoot技术专题】「权限校验专区」Shiro整合JWT授权和认证实现

    本章介绍一下常用的认证框架Shiro结合springboot以及集合jwt快速带您开发完成一个认证框架机制. Maven配置依赖 <dependency> <groupId>o ...

  5. MacOS Typora集成SM.SM图床 实现自动上传图片

    MacOS Typora集成SM.SM图床 实现自动上传图片 此为PicGo-Core (Command line) (OpenSource)配置方法 参照官网 https://support.typ ...

  6. Go语言核心36讲(Go语言基础知识四)--学习笔记

    04 | 程序实体的那些事儿(上) 还记得吗?Go 语言中的程序实体包括变量.常量.函数.结构体和接口. Go 语言是静态类型的编程语言,所以我们在声明变量或常量的时候,都需要指定它们的类型,或者给予 ...

  7. java课堂测试2第一阶段:方法运用

    package test2; import java.util.*; public class Test2 { public static int generateRandom(int fanwei) ...

  8. C语言的return语句

    Q1:函数中的Return语句有什么用? Q2:Return 0有什么含义吗? A1:Return的作用为,跳出当前的函数,并且返回到调用当前函数的主调函数,当前函数中Return语句一下代码将不会运 ...

  9. Mybatis、maven项目中整合log4j (17)

    Mybatis.maven项目总整合log4j java 中Mybatis.maven项目总整合log4j 1.pom增加log4j包引用 2.添加 log4j.properties文件 # java ...

  10. Install WSL

    Install WSL Prerequisites You must be running Windows 10 version 2004 and higher (Build 19041 and hi ...