vue-cli 多頁(yè)面應(yīng)用

vue技術(shù)棧的同學(xué)，大多是用vue-cli來(lái)搭建單頁(yè)面應(yīng)用。如后臺(tái)管理系統(tǒng)，H5活動(dòng)等；

vue-cli多頁(yè)面應(yīng)用開(kāi)發(fā) 在初學(xué)時(shí)可能你有瀏覽過(guò)這方面的知識(shí)，但是實(shí)際開(kāi)發(fā)中卻比較少用到；

其實(shí)多頁(yè)面還是非常實(shí)用的，它可以用來(lái)實(shí)現(xiàn)組件庫(kù)的功能預(yù)覽、H5可視化系統(tǒng)的頁(yè)面預(yù)覽、個(gè)人站點(diǎn)的功能介紹等；

你可以直接跳到文末的倉(cāng)庫(kù)源碼，也可以跟著本文逐步搭建一個(gè)vue-cli多頁(yè)面應(yīng)用

例如下面的網(wǎng)站，都可以用多頁(yè)面應(yīng)用來(lái)實(shí)現(xiàn)：：

有贊：Vant

餓了么：Mint-UI

京東：Nutui

實(shí)現(xiàn)組件預(yù)覽項(xiàng)目

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

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

2.中間頁(yè)面區(qū)域：是我們的組件介紹，用來(lái)編寫(xiě)組件參數(shù)、說(shuō)明等；

3.右側(cè)手機(jī)頁(yè)：是一個(gè)iframe頁(yè)面，用來(lái)預(yù)覽組件具體的功能；

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

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

多頁(yè)面應(yīng)用配置

用vue-cli搭建項(xiàng)目后，在vue.config.js文件配置多頁(yè)面（如果沒(méi)有該文件，就手動(dòng)新建），參考官網(wǎng)案例 vue-cli多頁(yè)面配置

多頁(yè)面項(xiàng)目的工程目錄（核心文件說(shuō)明）

├── public                # html
    ├── index.html        # 主應(yīng)用
    ├── view.html         # 子應(yīng)用
├── src                   # 主應(yīng)用
    ├── layout            # 頁(yè)面布局
    ├── router            # 路由
    ├── view              # 頁(yè)面
    ├── App.vue           # 視圖入口
    ├── main.js           # 項(xiàng)目入口
├── srcview               # 子應(yīng)用
    ├── router            # 路由
    ├── view              # 頁(yè)面
    ├── App.vue           # 視圖入口
    ├── main.js           # 項(xiàng)目入口

vue.config.js 配置

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

頁(yè)面布局

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

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

├── layout                
    ├── menu              # 菜單
    ├── index.vue         # 主體
    ├── look.vue          # 手機(jī)頁(yè)

左側(cè)菜單欄

本次項(xiàng)目的菜單使用了組件遞歸，詳細(xì)案例可參考之前的文章【業(yè)務(wù)實(shí)例】vue組件遞歸及其應(yīng)用，菜單開(kāi)發(fā)有兩個(gè)注意點(diǎn)：

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

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

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

在組件開(kāi)發(fā)中，可以減少代碼編寫(xiě)，這個(gè)書(shū)寫(xiě)技巧非常實(shí)用（做好筆記，這是期末考試重點(diǎn)）

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

菜單使用組件遞歸生成，所以對(duì)于多層代碼，我們需要通過(guò)v-on="$listeners"進(jìn)行事件傳遞，否則無(wú)法正確獲取菜單的點(diǎn)擊事件

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

中間區(qū)域

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

@src/layout/menu：index.vue

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

右側(cè)手機(jī)頁(yè)

@src/layout/menu：look.vue

手機(jī)界面用iframe實(shí)現(xiàn)，菜單點(diǎn)擊后，將拿到最新的currentUrl，然后拼接上/view#/（因?yàn)樵趘ue.config.js中配置該路徑的頁(yè)面），即可打開(kāi)子應(yīng)用的頁(yè)面

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

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

功能擴(kuò)展建議

本次項(xiàng)目對(duì)主界面、手機(jī)界面進(jìn)行了項(xiàng)目分離，便于維護(hù)。你可以嘗試二次改造，例如：

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

更多功能實(shí)現(xiàn)，評(píng)論區(qū)交流

倉(cāng)庫(kù)源碼

vue-multi-page

總結(jié)

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

最新評(píng)論