vue2-admin-mpa vue2多頁面應用系統【開源項目】

• 2021 年 11 月 5 日
• 筆記
• Vue2, WEB

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. 開源地址

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