vue 2.0 請(qǐng)教項(xiàng)目適配移動(dòng)端和電腦端，抽取 js 部分，樣式獨(dú)立

在已有的 pc 項(xiàng)目下再建立一個(gè)移動(dòng)端項(xiàng)目，然后打算將 pc 中的方法都分別按模塊寫(xiě)到另外一個(gè) function 文件夾中，而 pc 和移動(dòng)端里面的文件.vue 就僅僅寫(xiě) template 和 style，然后在 index.html 中引入所有模塊的 function/各種模塊.js 文件，請(qǐng)問(wèn)這樣的做法合適嗎？一個(gè)項(xiàng)目既然要有移動(dòng)端又有電腦端主流的做法都是怎么做的呢？

當(dāng)然在路由中判斷是進(jìn)入 pc 還是移動(dòng)端的頁(yè)面。

請(qǐng)大家不吝指教，謝謝。

回答

編輯回答

拼未來(lái)

如果你的移動(dòng)端和 PC 端產(chǎn)品存在很大的功能差異，那么可以考慮用兩套邏輯實(shí)現(xiàn)，不然的話，建議還是一套
一套邏輯：使用響應(yīng)式的樣式，盡量采用流式布局（不寫(xiě)死寬高，自適應(yīng)）
兩套邏輯：服務(wù)器端通過(guò) userAgent 輸出不同的頁(yè)面；公共部分建立公公類庫(kù)，使用 npm 或者 git submodule 管理

2017年11月16日 08:53

編輯回答

苦妄

navigator.userAgent試試？

2017年12月12日 15:50

編輯回答

絯孑氣

個(gè)人認(rèn)為可以用將vue使用變成多頁(yè)，這是本站關(guān)于多頁(yè)的文章
然后入口分成pc端和mobile端兩個(gè)，根據(jù)userAgent來(lái)判斷設(shè)備是哪個(gè)端的

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "移動(dòng)端url";
} else {
    window.location.href = "pc端url";
}

估計(jì)多頁(yè)的配置有點(diǎn)小麻煩，不過(guò)這樣代碼結(jié)構(gòu)也會(huì)比較清晰吧。

2018年3月19日 10:09