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