vue-cli 多頁面應(yīng)用
vue技術(shù)棧的同學(xué)，大多是用vue-cli來搭建單頁面應(yīng)用。如后臺(tái)管理系統(tǒng)，H5活動(dòng)等；
vue-cli多頁面應(yīng)用開發(fā) 在初學(xué)時(shí)可能你有瀏覽過這方面的知識(shí)，但是實(shí)際開發(fā)中卻比較少用到；
其實(shí)多頁面還是非常實(shí)用的，它可以用來實(shí)現(xiàn)組件庫的功能預(yù)覽、H5可視化系統(tǒng)的頁面預(yù)覽、個(gè)人站點(diǎn)的功能介紹等；
你可以直接跳到文末的倉庫源碼，也可以跟著本文逐步搭建一個(gè)vue-cli多頁面應(yīng)用
例如下面的網(wǎng)站，都可以用多頁面應(yīng)用來實(shí)現(xiàn)：：
實(shí)現(xiàn)組件預(yù)覽項(xiàng)目
本案例實(shí)現(xiàn)的功能：
1.左側(cè)菜單欄，點(diǎn)擊菜單后，中心區(qū)域頁面、手機(jī)界面都會(huì)切換；
2.中間頁面區(qū)域：是我們的組件介紹，用來編寫組件參數(shù)、說明等；
3.右側(cè)手機(jī)頁：是一個(gè)iframe頁面，用來預(yù)覽組件具體的功能；
實(shí)際上，右側(cè)手機(jī)頁也可以使用動(dòng)態(tài)組件來實(shí)現(xiàn)，為什么還要使用多頁面應(yīng)用開發(fā)呢？
主要是出于下面幾個(gè)問題的考慮：
- 組件可能涉及到生命周期等函數(shù)，使用iframe頁面，可以更加真實(shí)模擬組件調(diào)用；
- 使用iframe頁面，可以避免主界面的全局樣式、變量對預(yù)覽頁面的影響；
- 使用多頁面應(yīng)用，可以分離主界面、預(yù)覽界面的代碼，使其成為兩個(gè)相對獨(dú)立的工程，便于維護(hù)；
多頁面應(yīng)用配置
用vue-cli搭建項(xiàng)目后，在vue.config.js文件配置多頁面（如果沒有該文件，就手動(dòng)新建），參考官網(wǎng)案例vue-cli多頁面配置
多頁面項(xiàng)目的工程目錄（核心文件說明）
├── public # html
├── index.html # 主應(yīng)用
├── view.html # 子應(yīng)用
├── src # 主應(yīng)用
├── layout # 頁面布局
├── router # 路由
├── view # 頁面
├── App.vue # 視圖入口
├── main.js # 項(xiàng)目入口
├── srcview # 子應(yīng)用
├── router # 路由
├── view # 頁面
├── 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)用",
},
view1: {
entry: './srcview/main.js',
template: './public/view.html',
filename: 'view.html',
title: "子應(yīng)用",
},
}
頁面布局
- 左側(cè)菜單欄：根據(jù)主應(yīng)用路由，遞歸生成；
- 中間區(qū)域：主應(yīng)用的子頁面，根據(jù)路由切換；
- 左側(cè)區(qū)域：手機(jī)預(yù)覽頁，使用iframe實(shí)現(xiàn)；
目錄結(jié)構(gòu)
├── layout
├── menu # 菜單
├── index.vue # 主體
├── look.vue # 手機(jī)頁
左側(cè)菜單欄
本次項(xiàng)目的菜單使用了組件遞歸，詳細(xì)案例可參考之前的文章【業(yè)務(wù)實(shí)例】vue組件遞歸及其應(yīng)用，菜單開發(fā)有兩個(gè)注意點(diǎn)：
1. @src/layout/menu： index.vue
使用v-bind="$attrs"進(jìn)行隔代組件的props屬性傳遞；
使用v-on="$listeners"進(jìn)行隔代組件的事件傳遞；
在組件開發(fā)中，可以減少代碼編寫，這個(gè)書寫技巧非常實(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
菜單使用組件遞歸生成，所以對于多層代碼，我們需要通過v-on="$listeners"進(jìn)行事件傳遞，否則無法正確獲取菜單的點(diǎn)擊事件
<!-- 核心代碼 -->
<p-el-menu :menuList="menu.children" v-on="$listeners" />
中間區(qū)域
中間區(qū)域是比較常規(guī)的路由嵌套<router-view>設(shè)置，直接上代碼
@src/layout/menu：index.vue
<el-main>
<transition name="fade-transform" mode="out-in">
<!-- 核心代碼 -->
<router-view></router-view>
</transition>
</el-main>
右側(cè)手機(jī)頁
@src/layout/menu：look.vue
手機(jī)界面用iframe實(shí)現(xiàn)，菜單點(diǎn)擊后，將拿到最新的currentUrl，然后拼接上/view#/（因?yàn)樵趘ue.config.js中配置該路徑的頁面），即可打開子應(yīng)用的頁面
<!-- 核心代碼 -->
<iframe :src="src" frameborder="0" class="view-iframe"></iframe>
<!-- 計(jì)算屬性-->
computed: {
src() {
let url = `${location.origin}/view#/${this.currentUrl}`;
return url;
},
},
功能擴(kuò)展建議
本次項(xiàng)目對主界面、手機(jī)界面進(jìn)行了項(xiàng)目分離，便于維護(hù)。你可以嘗試二次改造，例如：
- 子應(yīng)用的路由，可以通過監(jiān)聽文件動(dòng)態(tài)注冊，可以實(shí)現(xiàn)文件映射路由，就不用繁瑣的配置路由表了；
- 主應(yīng)用、子應(yīng)用的路由你可以區(qū)分路由地址，或者動(dòng)態(tài)顯示手機(jī)頁
- 項(xiàng)目打包方面可以分目錄，可以分開部署
更多功能實(shí)現(xiàn)，評(píng)論區(qū)交流
