基於requirejs的vue2專案 一

2021-09-17 04:41:21 字數 1061 閱讀 6504

專案截圖

專案演示位址

該專案主要是解決:

如何讓不了解前端構建,並負責大部分業務邏輯的後端 開發出 乙個單頁應用

覺得有用請給個推薦,謝謝

最近做了一次小更新,配置檔案可以配置模組是否非同步載入以及是否關聯store

公司推進手機端專案,但目前開發模式依舊是後端渲染為主,後端開發對前端的自動化打包與構建工具一竅不通,並且沒有外網;在這樣的情況下,如何才能讓後端不改變開發模式的情況下,做出單頁應用呢?

要解決的問題有以下幾點:

react無前端構建環境開發難度是很大的,而且有一定門檻,直接排除;目前比較傾心於vue,上手容易,api簡單易懂;對於後端來說基本無門檻;

控制項庫我選擇了餓了麼的mint-ui進行移植,後續將有介紹

主要用到了gulp來進行css預處理,基本的內容都是畫頁面(沒什麼技術含量)

因為決定使用vue,這個情況而可以忽略;

協同我想到的是分頁面,vue的字串模板和requirejs的text外掛程式正好可以實現;

無構建環境下檢視頁面可以使用requirejs來載入各個模板

初始化vue-router的時候通過配置了生成router和載入指定頁面(模組)

requirejs提供了r.js,可直接在開發完成後交由前端進行打包

這裡提供一下專案的目錄結構截圖

業務模組與公用控制項的檔案內容

git clone
安裝

npm install
執行

gulp
下一節

基於requirejs的vue2專案 三

這裡是打包篇 使用的是requirejs的r.js進行打包 思路是,通過entrance.js裡面的require.config進行專案的初打包 因為router.js和store.js裡面的引用是動態生成的,所以r.js無法對其進行處理,這裡我們用到了nodejs來進行檔案整合 具體看 node2...

使用RequireJs的好處

1 js檔案都是按照順序從上到下依次同步載入的,這樣的寫法有很大的缺點。首先,載入的時候,瀏覽器會停止網頁渲染,載入檔案越多,網頁失去響應的時間就會越長 2 其次,由於js檔案之間存在依賴關係,因此必須嚴格保證載入順序 比如上例的a.js要在b.js的前面 依賴性最大的模組一定要放到最後載入,當依賴...

基於vue的UI框架

1 餓了麼 vue 2.0後台ui框架 2 iview元件庫 iview 主要服務於 pc 介面的中後台業務,很優秀的元件庫,可惜不適合移動端 4 mint ui 餓了麼移動端元件庫 由餓了麼前端團隊推出的 mint ui 是乙個基於 vue.js 的移動端元件庫 5 vue admin 管理面板u...