基於 requirejs、vue全家桶、ant design 實現的 antd-vue-pro(模仿版)

一、閱讀以前

若是您對項目源碼感興趣，在閱讀源碼以前，我已經默認了你已經熟練的掌握了HTML/JAVASCRIPT/CSS3 中級編程知識，熟悉 Vue.js，而且對其異步組件加載原理有了深刻的認識，對 Vue 組件 template 中使用 html 模板的注意事項（不能使用PascalCase（首字母大寫命名），而須要使用 kebab-case 命名方式，以及自定義組件不能以單標籤的方式使用等等）的指示點已經掌握！對 ES六、Promise 的各類使用方式已經熟悉，固然，您得知道 AMD 和 CMD 的區別，以及爲何瀏覽器爲何目前 AMD 是主流。本項目中加載組件依賴的方式幾乎都是 AMD 配合 Promise 完成。

二、簡介

本人後端程序員一枚，業餘愛好前端，Vue 做爲目前前端煊赫一時的前端技術，其做用不言而喻，既能夠直接內嵌在網頁中實現咱們網站的一小部分功能，簡化咱們的開發！也能夠配合打包工具、vue 全家桶構建大型的單頁應用。首先得指出，我的以爲 Vue SPA 的最佳實踐是配合配合打包工具，本項目並不是挑戰此最佳實踐，而是嘗試 Requirejs + Vue + Vuex + Vue-router + axios + ant.design 構建純前端實現 SPA 的可能性。

項目靈感起源於 http-vue-loader, 一個能夠前端直接加載 .vue 文件的庫, 看起來很神奇，因而筆者去研究了它的源碼，其原理不是很複雜，卻讓筆者萌生了直接使用 http-vue-loader 構建一個純前端 SPA 的想法。固然，在落地的過程當中遇到了不少坑，若是不懂 http-vue-loader 原理，這個項目你是不可能實現的，所以，本項目的 http-vue-loader 已經被筆者優化了，其中包括: style 樣式局部化優化（很重要），script 模塊加載優化（重要），template 優化（配合 style 優化），網絡加載器緩存控制優化。

本項目基於 vue-antd-admin 改造，.vue 文件類似度 80% 以上，但不兼容，畢竟是純前端的版本，CMD 方式的模板加載是不支持的。

三、預覽地址

require-vue-admin

四、項目特點

• vue 文件幾乎和 CMD 方式一致
• vue 組件支持異步組件、非異步組件(本項目中未用到)
• 支持別名加載依賴，加載組件（很重要），eg:
  • @ 根路徑
  • @CMP components 路徑
  • @IMG 圖片路徑
  • 更多請查看 ~/static/require-config/modules/config.js 配置
• 支持局部樣式（很重要）
• vue 文件支持 ES6 語法
• 支持 development、production 環境
• 緩存支持（生產環境更新緩存只須要修改全局 version 便可更新）（很重要）
• 權限系統（完善中...）

五、注意事項

項目中有許多依賴依賴於 cdn，本地構建服務訪問請確保網絡暢通。

六、最後的話

先開源在這裏，項目不支持 IE，若是有問題可留言筆者。