vue-cli多頁面應用實踐之實現(xiàn)組件預覽項目

更新時間：2022年05月25日 10:06:51 作者：surewinT

在最近的項目中遇到了一個需求,找了相關資料后終于實現(xiàn),這篇文章主要給大家介紹了關于vue-cli多頁面應用實踐之實現(xiàn)組件預覽項目的相關資料,需要的朋友可以參考下

vue-cli 多頁面應用

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

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

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

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

例如下面的網(wǎng)站，都可以用多頁面應用來實現(xiàn)：：

有贊：Vant

餓了么：Mint-UI

京東：Nutui

實現(xiàn)組件預覽項目

本案例實現(xiàn)的功能：

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

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

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

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

組件可能涉及到生命周期等函數(shù)，使用iframe頁面，可以更加真實模擬組件調(diào)用；
使用iframe頁面，可以避免主界面的全局樣式、變量對預覽頁面的影響；
使用多頁面應用，可以分離主界面、預覽界面的代碼，使其成為兩個相對獨立的工程，便于維護；

多頁面應用配置

用vue-cli搭建項目后，在vue.config.js文件配置多頁面（如果沒有該文件，就手動新建），參考官網(wǎng)案例 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: "子應用",
    },
  }

頁面布局

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

目錄結(jié)構(gòu)

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

左側(cè)菜單欄

本次項目的菜單使用了組件遞歸，詳細案例可參考之前的文章【業(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>

右側(cè)手機頁

@src/layout/menu：look.vue

手機界面用iframe實現(xiàn)，菜單點擊后，將拿到最新的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;
    },
},