基於requirejs的vue2項目 (一)

項目截圖

項目演示地址

該項目主要是解決：

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

以爲有用請給個推薦，謝謝

最近作了一次小更新,配置文件能夠配置模塊是否異步加載以及是否關聯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

下一節