vue-cli 多頁面應用

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

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

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

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

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

有贊：Vant

餓了么：Mint-UI

京東：Nutui

實現組件預覽項目

本案例實現的功能：

1.左側菜單欄，點擊菜單后，中心區(qū)域頁面、手機界面都會切換；

2.中間頁面區(qū)域：是我們的組件介紹，用來編寫組件參數、說明等；

3.右側手機頁：是一個iframe頁面，用來預覽組件具體的功能；

實際上，右側手機頁也可以使用 動態(tài)組件 來實現，為什么還要使用多頁面應用開發(fā)呢？ 主要是出于下面幾個問題的考慮：

• 組件可能涉及到生命周期等函數，使用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: "主應用",
    },
    view: {
      entry: './srcview/main.js',
      template: './public/view.html',
      filename: 'view.html',
      title: "子應用",
    },
  }

頁面布局

• 左側菜單欄：根據主應用路由，遞歸生成；
• 中間區(qū)域：主應用的子頁面，根據路由切換；
• 左側區(qū)域：手機預覽頁，使用iframe實現；

目錄結構

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

左側菜單欄

本次項目的菜單使用了組件遞歸，詳細案例可參考之前的文章【業(yè)務實例】vue組件遞歸及其應用，菜單開發(fā)有兩個注意點：

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

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

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

在組件開發(fā)中，可以減少代碼編寫，這個書寫技巧非常實用（做好筆記，這是期末考試重點）

 <!-- 核心代碼 -->
<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" />

中間區(qū)域

中間區(qū)域是比較常規(guī)的路由嵌套設置，直接上代碼

@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;
    },
},

功能擴展建議

本次項目對主界面、手機界面進行了項目分離，便于維護。你可以嘗試二次改造，例如：

• 子應用的路由，可以通過監(jiān)聽文件動態(tài)注冊，可以實現文件映射路由，就不用繁瑣的配置路由表了；
• 主應用、子應用的路由你可以區(qū)分路由地址，或者動態(tài)顯示手機頁
• 項目打包方面可以分目錄，可以分開部署

更多功能實現，評論區(qū)交流

倉庫源碼

vue-multi-page

總結

到此這篇關于vue-cli多頁面應用實踐之實現組件預覽項目的文章就介紹到這了,更多相關vue-cli多頁面實現組件預覽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論