前言
不知道大家有沒有這種感覺，現在流行的很多前端技術，基本上都基於webpack編譯，當然不是說這種方案不好，在標准的開發流程運行中，這種方式其實也挺不錯，管理方便，代碼統一。
痛點：項目不是單獨針對一個用戶，多個用戶都略有細微變化，又不需要升級維護，實際調整對應界面即可解決問題。此時，如果用webpack方式，就略嫌麻煩，本來可以直接修改就完事的，還需要再編譯，而且也許另一個需求不同還要還原到前面某個狀態再調整。
於是我想有沒有什么辦法可以既可以趕上潮流實現程序的前后端分離，又可以用上流行的vue技術。經過和我心中的大神+導師+好友的溝通(實則我全程圍觀)，有了這套requirejs+vue實現的 模塊開發方案。
本方案主框架基本是大神操刀，我純屬記錄使用，所以有些地方也是一知半解，盡量表達清楚，也希望有和我同樣需求的各位朋友一起共同學習交流。
使用到的技術及插件
requirejs （主要的模塊話方案的核心元素） 官網地址：https://requirejs.org/ （這個我基本不了解，就死記了固定格式不知道什么時候才能算是掌握）
vue （javascript框架，本文實現前后端分離的重要組成部分） 官網地址：https://cn.vuejs.org/
View-UI (原名 iView，基於vue的一套 UI框架，提供了柵格化，按鈕，表單，表格，彈窗等UI的整套方案，基本夠用) 官網地址：https://www.iviewui.com/ （這個貌似近兩年才改名，好像是創作人開了公司專門來維護，還出了pro版本，當然還有可以免費使用的，多謝大神貢獻）
使用注意事項
因為使用的技術都是前端較新技術，所以瀏覽器兼容基本無視IE，谷歌等瀏覽器也不易太低。如果需要使用請自行查找解決方案。
哎，之前沒寫過博客，想寫一篇博客真的是不容易，大半天了還沒進正題，下面開始正題：
1、框架基本結構
2、入口頁面index.html
1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <meta name="renderer" content="webkit"> 8 <title>requirejs+vue 管理框架</title> 9 <script src="libs/require/require.min.js" data-main="src/app"></script> 10 </head> 11 12 <body> 13 <div id="root"> 14 <router-view></router-view> 15 </div> 16 </body> 17 18 </html>
主要代碼：
3、app.js配置及啟動代碼
1 define([], function () { 2 3 // 配置require 4 requirejs.config({ 5 paths: { // 路徑別名， 配置路徑，簡化后續代碼引入時寫的路徑，可以直接用這里配置的別名 6 // 三方庫 7 'vue': '../libs/vue/vue', 8 'vue-router': '../libs/vue-router/vue-router', 9 'axios': '../libs/axios/axios.min', 10 'iview': '../libs/vue-iview/iview.min', 11 12 // require 插件 13 'text': '../libs/require-plugins/text', 14 'css': '../libs/require-plugins/css.min', 15 16 17 // 自己的公用文件 18 'http': './utils/http', 19 'user': './utils/user', 20 21 22 // 自己的公用組件 23 'com-page-header': './components/page-header/index' 24 }, 25 shim: { // 墊片，配置依賴關系 26 'vue-router': ['vue'], // 加載vue-router時，會自動引入vue，如果vue之前沒引入過的話。 27 'iview': ['vue'], 28 } 29 }) 30 31 // 引入模塊，也就是其他文件 32 require([ 33 'vue', 'vue-router', './routes', 'user', 'iview', 'css!../libs/vue-iview/iview.css', 34 'css!./app.css' 35 ], function (Vue, VueRouter, routes, user, iview) { 36 37 // 上面的 Vue參數是從 上面數組 'vue' 里面來的。這個地方是按順序的。順序不能錯。 38 39 // 下面就是 啟動一個 vue實例。 40 41 let router = new VueRouter({ 42 routes 43 }) 44 45 Vue.use(VueRouter) 46 Vue.use(iview) 47 48 window.app = new Vue({ 49 router, 50 }).$mount('#root') 51 52 if (!user.isLogin()) { 53 router.push({ path: '/login' }) 54 } 55 56 }) 57 58 })
因為我打算打造的是后台管理，所以直接引入了第三方庫，vue，vue-router, axios, iview,（這個iView要特別說一下，可以換成其他你習慣的UI，貌似必須要使用這種別名方式才可以使用）
通過上述兩個文件，基本上大致確定了程序的框架，通過index.html引入app.js，引入各種需要模塊，別名配置，以及設置各個模塊的依賴關系，
最后通過require啟動vue，掛在路由到#root節點，判斷如果沒有登陸跳轉到登陸入口
這里因為采用了vue的路由，所以后續鏈接配置主要依附於路由設置
4、routes路由配置
1 define([ 2 ], function () { 3 4 // 路由文件，申明路由，哪些頁面的。 5 6 let loader = (deps) => { 7 return () => { 8 if (!Array.isArray(deps)) { 9 deps = [deps] 10 } 11 return new Promise((resolve, reject) => { 12 require(deps, function (res) { 13 resolve(res) 14 }) 15 }) 16 } 17 } 18 19 var routes = [ 20 { path: '/login', component: loader('./pages/login') }, 21 22 { path: '/test', component: loader('./pages/test') }, 23 { 24 path: '/', 25 component: loader('./pages/layout/index'), 26 children: [ 27 { path: '/home', component: loader('./pages/home/index') }, 28 { path: '/user-list', component: loader('./pages/user/user-list') } 29 30 31 ] 32 }, 33 34 35 36 ] 37 38 return routes 39 40 })
如上文我們新增test路由
在./pages/目錄新增test.js文件內容如下
1 define([ 2 3 ],function(){ 4 return{ 5 template:"<div>新增一個test頁面{{name}}</div>", 6 data: function() { 7 return { 8 name: "hello world" 9 } 10 }, 11 created:function(){ 12 //this.$Message.info('This is a info tip'); 13 14 } 15 } 16 });
其中return 返回的對象使用的是vue語法，返回模板，及內容。展示效果如下圖所示
至此，基礎的框架完成，剩下的內容看自己發揮完善了！
整個項目下載 demo