标签：vue2 mpa alive keep theme 应用 import 页面

vue2-admin-mpa vue2多页面应用系统【开源项目】 

1. 项目介绍

 

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

 

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

 

 

 

2. 功能介绍

 

2.1 多页面切换功能

 

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

 

1 2 3 4 5 6 7 8 9 10 11 12

<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 属性才会被缓存。

 

1 2 3 4

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

 

 

 

3) 菜单切换效果

 

 

 

 

2.2 主题切换

 

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

 

1) 样式结构

 

 

1 2 3 4 5 6 7 8 9

// index.scss<br><br>@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. 开源地址

 

github：https://github.com/polk6/vue2-admin-mpa

 

 

 

End Web开发之路系列文章

标签：vue2,mpa,alive,keep,theme,应用,import,页面
来源： https://www.cnblogs.com/Leo_wl/p/15835393.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。