資訊專欄INFORMATION COLUMN
摘要：項目截圖項目演示地址該項目主要是解決如何讓不了解前端構(gòu)建，并負(fù)責(zé)大部分業(yè)務(wù)邏輯的后端開發(fā)出一個單頁應(yīng)用覺得有用請給個推薦，謝謝最近做了一次小更新配置文件可以配置模塊是否異步加載以及是否關(guān)聯(lián)開發(fā)背景公司推進(jìn)手機端項目，但目前開發(fā)模式依舊是后端
項目截圖
項目演示地址
該項目主要是解決：
如何讓不了解前端構(gòu)建，并負(fù)責(zé)大部分業(yè)務(wù)邏輯的后端 開發(fā)出 一個單頁應(yīng)用
覺得有用請給個推薦，謝謝
最近做了一次小更新,配置文件可以配置模塊是否異步加載以及是否關(guān)聯(lián)store
開發(fā)背景公司推進(jìn)手機端項目，但目前開發(fā)模式依舊是后端渲染為主，后端開發(fā)對前端的自動化打包與構(gòu)建工具一竅不通，并且沒有外網(wǎng)；在這樣的情況下，如何才能讓后端不改變開發(fā)模式的情況下，做出單頁應(yīng)用呢？
要解決的問題有以下幾點：
采用什么前端框架
前端如何開發(fā)
后端如何快速上手
后端如果協(xié)同開發(fā)
后端實時的在無構(gòu)建環(huán)境下查看頁面效果
如何打包
采用什么前端框架react無前端構(gòu)建環(huán)境開發(fā)難度是很大的，而且有一定門檻，直接排除；目前比較傾心于vue，上手容易，API簡單易懂；對于后端來說基本無門檻；
控件庫我選擇了餓了么的mint-ui進(jìn)行移植，后續(xù)將有介紹
主要用到了gulp來進(jìn)行css預(yù)處理，基本的內(nèi)容都是畫頁面（沒什么技術(shù)含量）
后端如何上手因為決定使用vue，這個情況而可以忽略；
后端如何協(xié)同開發(fā)協(xié)同我想到的是分頁面，vue的字符串模板和requirejs的text插件正好可以實現(xiàn)；
無構(gòu)建環(huán)境下查看頁面效果無構(gòu)建環(huán)境下查看頁面可以使用requirejs來加載各個模板
初始化vue-router的時候通過配置了生成router和加載指定頁面（模塊）
requirejs提供了r.js，可直接在開發(fā)完成后交由前端進(jìn)行打包
實現(xiàn)一個頁面包含tpl.html和index.js;tpl.html為vue的template字段通過requirejs加載；index.js 返回一個vue實例化須要用到的對象,里面包含了該頁面的邏輯；
添加配置文件，添加vue-router，通過配置文件在new VueRouter 生成 routes；在項目new Vue的時候指定該router實例；這樣頁面中的跳轉(zhuǎn)就可以通過配置的router進(jìn)行切換
添加vuex,以處理可能的全局狀態(tài)處理，同樣通過配置文件來指定每一個頁面是否加載store
添加gulp處理sass文件以供前端開發(fā)
這里提供一下項目的目錄結(jié)構(gòu)截圖
業(yè)務(wù)模塊與公用控件的文件內(nèi)容
后續(xù)文章還將介紹：
控件庫的移植;
通過配置加載模塊
模塊之間切換的動效實現(xiàn)
通過配置進(jìn)行最終打包
通過nodejs對打包過程的特殊處理 (配置文件的引入引起的問題)
項目源碼下載git clone https://github.com/heruiwoniou/vue-requirejs-mobile-ui.git
安裝
npm install
運行
gulp
下一節(jié)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86796.html
摘要：這里是打包篇使用的是的進(jìn)行打包思路是通過里面的進(jìn)行項目的初打包因為和里面的引用是動態(tài)生成的所以無法對其進(jìn)行處理這里我們用到了來進(jìn)行文件整合具體看代碼這里是通過配置文件來組裝配置信息對設(shè)置了同步的模板進(jìn)行打包這里是通過 這里是打包篇 使用的是requirejs的r.js進(jìn)行打包 思路是,通過entrance.js里面的require.config進(jìn)行項目的初打包 因為router.js和...
摘要：減少服務(wù)器的請求對于和這兩個特殊寫發(fā)的文件因為的打包不識別，要進(jìn)行特殊處理 上一節(jié)提完了構(gòu)思和大體實現(xiàn)下面來看具體的 配置文件config 配置文件主要是是用來讓后端開發(fā)自主添加頁面，并通過該配置生成route和加載對應(yīng)的store，這樣就省去了后端去了解vue-router和vuex的用法了; 配置文件格式如下 這里采用umd格式開頭是為了后續(xù)nodejs進(jìn)行調(diào)用 (function...
摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...
摘要：是目前唯一一個支持同步調(diào)用的跨平臺年度上最多的個項目前端掘金年接近尾聲，在最近的幾篇文章中，會整理總結(jié)一些年度開源項目。 JS 全棧教程 - 前端 - 掘金本課程是基于阮一峰的 js 全棧教程的視頻版本，免費供大家觀看... 2016 年 10 個最佳的 CodePen 作品 - 前端 - 掘金說到 CodePen，前端開發(fā)者們肯定不會陌生。如果說 Dribbble 是設(shè)計師們聚集的圣...
摘要：還記得一年半前轉(zhuǎn)向后端的那種無助的感覺，獨自一人摸黑走路，學(xué)習(xí)各種前端知識，走了不少彎路，現(xiàn)在終于算是入門了前端我相信不少人也有我當(dāng)時同樣的無助，所以我在空閑時間整理了下所用到的知識，便編寫了一個手腳架，希望能給其他正學(xué)習(xí)前端的同學(xué)一些參考 還記得一年半前轉(zhuǎn)向后端的那種無助的感覺，獨自一人摸黑走路，學(xué)習(xí)各種前端知識，走了不少彎路，現(xiàn)在終于算是入門了前端～我相信不少人也有我當(dāng)時同樣的無助...
閱讀 2419·2021-10-11 10:57
閱讀 1274·2021-10-09 09:59
閱讀 1986·2019-08-30 15:53
閱讀 3206·2019-08-30 15:53
閱讀 1001·2019-08-30 15:45
閱讀 727·2019-08-30 15:44
閱讀 3433·2019-08-30 14:24
閱讀 946·2019-08-30 14:21
