欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 如何從單頁應(yīng)用改造成多頁應(yīng)用

 更新時間:2020年10月23日 10:02:38   作者:八寶君  
這篇文章主要介紹了vue 如何從單頁應(yīng)用改造成多頁應(yīng)用,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下

最近接到這樣一個需求,將之前的三個項目合并成一個,并且要做成后臺可配置化,前端動態(tài)引入組件的模板化框架。
聽起來是不是很拗口。。。我自己當(dāng)時都蒙了。
簡單分析下需求,就是,項目A/B/C的內(nèi)容是交叉的,有的頁面不同,有的頁面和組件是公用的,例如A項目多了個人中心及其里面所有內(nèi)容(最全的一個項目,但是是放在微信中的,需要獲取微信授權(quán)),B項目是通用版的項目(也就是說可以放在微信,也可以放在app內(nèi),不需要獲取授權(quán)之類的。),C項目是A/B項目中共有的一個頁面功能抽取出來了。
所以有的時候比如說這塊功能需要調(diào)整,那么就得A/B/C三個項目關(guān)于這塊的功能與頁面也要一起調(diào)整。
動態(tài)化組件的意思就是,D頁面由組件1234按照這樣的順序排列構(gòu)成,同時D頁面也供機構(gòu)5、6、7共同使用,但是機構(gòu)6突然想要2134這樣的順序,機構(gòu)7又想要4132這樣的順序。代碼依舊是一套,而不是重新拉個分支,然后這個分支將D頁面改成2134給機構(gòu)6,再拉個分支將D頁面改成4132給機構(gòu)7。這樣做會增加服務(wù)器的壓力,每次機構(gòu)有定制化需求就重新拉分支的話,機構(gòu)很多的話,容量會不夠的。
(好像篇幅有點長,,扯得有點多了)

關(guān)于動態(tài)組件

這一塊簡單說一下,如果有不懂的,可以留言,我會把我知道的說出來,我這一塊做的主要是<components :is="xxx">配合vuex,來做的。
前端頁面改成上述模式,具體的組件排列順序由后臺傳過來,比如說請求接口的時候,告訴它這是在D頁面,并且把相應(yīng)的機構(gòu)號6傳過去,后臺傳給我一個組件數(shù)組,moduleList:['2', '1', '3', '4'],然后我前端的<components :is="item" v-for="(item, index) in moduleList" :key="index">會按照moduleList里的組件順序來動態(tài)渲染組件,之前一些父子組件傳數(shù)據(jù),在這里就變得不太適用了,所以這里的數(shù)據(jù)改用vuex存儲。考慮到vuex在刷新數(shù)據(jù)丟失的問題,部分比較重要的,不想重新請求的,改用sessionStorage存儲。

關(guān)于多入口多出口

其實就是最開始的項目入口是App.vuemain.js,打包出來的出入口是index.html,然后現(xiàn)在增加了兩個,我這邊是增加了genneral.js和genneral.html以及single.jssingle.html

1.首先要更改vue-cli生成的webpack里的參數(shù),聲明一下我這個版本的webpack版本還是2.6.x的,比較老了,現(xiàn)在應(yīng)該都到4.x.x了吧。

PS:路由和store記得要各自獨立,因為我這里的vuex很少只涉及一兩個模塊。并且僅僅是傳遞數(shù)據(jù)之類的,所以這里沒有做成獨立的。

2.修改build/webpack.base.conf.js

3.修改 build/webpack.dev.conf.js

4.修改 build/webpack.prod.conf.js

5.修改 config/index.js

理一下對應(yīng)關(guān)系

main.js ==> App.vue ==> router/index.js A項目
general.js ==> general.vue ==> router/general.js B項目
single.js ==> single.vue ==> router/single.js C項目

部署的時候分三個不同的url

xxxxx/index.html對應(yīng)A項目
xxxxx/general.html 對應(yīng)B項目
xxxxx/single.html對應(yīng)C項目

至于頁面中的差異,我是通過v-if來控制,A項目的D頁面是否有頂部tab,B項目的D頁面是否有底部footer。
因為這些頁面大致是一樣,僅有部分微調(diào)。所以改成用v-if來控制。

寫了一個demo,方便大家看,僅僅是改了webpack的配置而已,戳這里

以上就是vue 如何從單頁應(yīng)用改造成多頁應(yīng)用的詳細內(nèi)容,更多關(guān)于vue 單頁改多頁的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Vue.js對象轉(zhuǎn)換實例

    Vue.js對象轉(zhuǎn)換實例

    這篇文章主要介紹了 Vue.js對象轉(zhuǎn)換的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-06-06
  • 解決vue3項目中el-menu不兼容SSR問題

    解決vue3項目中el-menu不兼容SSR問題

    這篇文章主要介紹了解決vue3項目中el-menu不兼容SSR問題,需要的朋友可以參考下
    2023-12-12
  • Vue3?入口文件createApp函數(shù)詳解

    Vue3?入口文件createApp函數(shù)詳解

    這篇文章主要介紹了Vue3?入口文件createApp函數(shù),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • 詳解為什么Vue中不要用index作為key(diff算法)

    詳解為什么Vue中不要用index作為key(diff算法)

    這篇文章主要介紹了詳解為什么Vue中不要用index作為key(diff算法),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • 一篇文章帶你搞懂VUE基礎(chǔ)知識

    一篇文章帶你搞懂VUE基礎(chǔ)知識

    這篇文章主要介紹了vue 組件基礎(chǔ)知識的相關(guān)資料,幫助大家更好的理解和使用vue的組件,感興趣的朋友可以了解下
    2021-11-11
  • 基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)

    基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)

    這篇文章主要介紹了基于Vite2.x的Vue 3.x項目的搭建實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • vue鼠標(biāo)懸停事件實例詳解

    vue鼠標(biāo)懸停事件實例詳解

    這篇文章主要介紹了vue鼠標(biāo)懸停事件,本文通過示例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-04-04
  • vue中子組件調(diào)用兄弟組件方法

    vue中子組件調(diào)用兄弟組件方法

    這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue動態(tài)綁定圖標(biāo)的完整步驟

    vue動態(tài)綁定圖標(biāo)的完整步驟

    動態(tài)綁定是我們?nèi)粘i_發(fā)中經(jīng)常遇到的一個需求,下面這篇文章主要給大家介紹了關(guān)于vue動態(tài)綁定圖標(biāo)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2021-05-05
  • 如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin

    如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin

    這篇文章主要介紹了如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論