vue-cli多頁面應用實踐，實現元件預覽

vue-cli 多頁面應用

vue技術棧的同學，大多是用vue-cli來搭建單頁面應用。如後臺管理系統，H5活動等；

vue-cli多頁面應用開發在初學時可能你有瀏覽過這方面的知識，但是實際開發中卻比較少用到；

其實多頁面還是非常實用的，它可以用來實現元件庫的功能預覽、H5視覺化系統的頁面預覽、個人站點的功能介紹等；

你可以直接跳到文末的倉庫原始碼，也可以跟著本文逐步搭建一個vue-cli多頁面應用

例如下面的網站，都可以用多頁面應用來實現：：

有贊：Vant

餓了麼：Mint-UI

京東：Nutui

實現元件預覽專案

本案例實現的功能：
1.左側選單欄，點選選單後，中心區域頁面、手機介面都會切換；
2.中間頁面區域：是我們的元件介紹，用來編寫元件引數、說明等；
3.右側手機頁：是一個iframe頁面，用來預覽元件具體的功能；

實際上，右側手機頁也可以使用動態元件來實現，為什麼還要使用多頁面應用開發呢？
主要是出於下面幾個問題的考慮：

元件可能涉及到生命週期等函式，使用iframe頁面，可以更加真實模擬元件呼叫；
使用iframe頁面，可以避免主介面的全域性樣式、變數對預覽頁面的影響；
使用多頁面應用，可以分離主介面、預覽介面的程式碼，使其成為兩個相對獨立的工程，便於維護；

多頁面應用配置

用vue-cli搭建專案後，在vue.config.js檔案配置多頁面（如果沒有該檔案，就手動新建），參考官網案例vue-cli多頁面配置

多頁面專案的工程目錄（核心檔案說明）

├── public                # html
    ├── index.html        # 主應用
    ├── view.html         # 子應用
├── src                   # 主應用
    ├── layout            # 頁面佈局
    ├── router            # 路由
    ├── view              # 頁面
    ├── App.vue           # 檢視入口
    ├── main.js           # 專案入口
├── srcview               # 子應用
    ├── router            # 路由
    ├── view              # 頁面
    ├── App.vue           # 檢視入口
    ├── main.js           # 專案入口

vue.config.js 配置

  pages: {
    index: {
      entry: './src/main.js',
      template: './public/index.html',
      filename: 'index.html',
      title: "主應用",
    },
    view1: {
      entry: './srcview/main.js',
      template: './public/view.html',
      filename: 'view.html',
      title: "子應用",
    },
  }

頁面佈局

左側選單欄：根據主應用路由，遞迴生成；
中間區域：主應用的子頁面，根據路由切換；
左側區域：手機預覽頁，使用iframe實現；

目錄結構

├── layout                
    ├── menu              # 選單
    ├── index.vue         # 主體
    ├── look.vue          # 手機頁

左側選單欄

本次專案的選單使用了元件遞迴，詳細案例可參考之前的文章【業務例項】vue元件遞迴及其應用，選單開發有兩個注意點：

1. @src/layout/menu： index.vue

使用v-bind="$attrs"進行隔代元件的props屬性傳遞；

使用v-on="$listeners"進行隔代元件的事件傳遞；

在元件開發中，可以減少程式碼編寫，這個書寫技巧非常實用（做好筆記，這是期末考試重點）

 <!-- 核心程式碼 -->
<el-menu class="p-el-menu">
      <p-el-menu v-bind="$attrs" v-on="$listeners" />
</el-menu>

2. @src/layout/menu：p-el-menu.vue

選單使用元件遞迴生成，所以對於多層程式碼，我們需要通過v-on="$listeners"進行事件傳遞，否則無法正確獲取選單的點選事件

 <!-- 核心程式碼 -->
 <p-el-menu :menuList="menu.children" v-on="$listeners" />

中間區域

中間區域是比較常規的路由巢狀<router-view>設定，直接上程式碼

@src/layout/menu：index.vue

<el-main>
    <transition name="fade-transform" mode="out-in">
        <!-- 核心程式碼 -->
        <router-view></router-view>
    </transition>
</el-main>

右側手機頁

@src/layout/menu：look.vue

手機介面用iframe實現，選單點選後，將拿到最新的currentUrl，然後拼接上/view#/（因為在vue.config.js中配置該路徑的頁面），即可開啟子應用的頁面

<!-- 核心程式碼 -->
<iframe :src="src" frameborder="0" class="view-iframe"></iframe>

<!-- 計算屬性-->
computed: {
    src() {
      let url = `${location.origin}/view#/${this.currentUrl}`;
      return url;
    },
},

功能擴充套件建議

本次專案對主介面、手機介面進行了專案分離，便於維護。你可以嘗試二次改造，例如：

子應用的路由，可以通過監聽檔案動態註冊，可以實現檔案對映路由，就不用繁瑣的配置路由表了；
主應用、子應用的路由你可以區分路由地址，或者動態顯示手機頁
專案打包方面可以分目錄，可以分開部署

更多功能實現，評論區交流

倉庫原始碼

vue-multi-page

vue-cli多頁面應用實踐，實現元件預覽