如何經過 Vue＋Webpack 來作通用的前端組件化架構設計

如何經過 Vue＋Webpack 來作通用的前端組件化架構設計

轉載

做者：伯樂在線專欄做者 - 新空氣

連接：http://web.jobbole.com/86977/

點擊 → 瞭解如何加入專欄做者

 

目前若是要說比較流行的前端架構哪家強，屈指可數：reactjs、angularjs、emberjs、avalonjs、vuejs。

 

我我的接觸使用過：avalonjs、angularjs、vuejs。由於工做以及前端團隊能力的問題，因此在不一樣的公司，在開發工做中選用了不一樣的前端架構。

 

如下僅僅是表明我我的選用架構的一些見解和理由，以下：

 

angular:

 

我以爲angularjs的學習上手週期比較長，可能遇到問題，都沒法馬上解決，並且編碼的質量明顯的不好，若是團隊沒有制定規範，那寫出來的代碼就無法看。對於一個選用angularjs的團隊來講，我認爲編碼規範是很重要的，不然對編碼能力是沒有提高的。

 

avalon:

 

avalonjs文檔資料沒有那麼全，我感受一些開源支持的力量不夠多。不過，若是有項目需求，須要去作IE瀏覽器的支持話，我建議選擇avalonjs

 

vue：

 

vuejs 文檔比較齊全，vue吸收了angularjs 的一些優勢，規避了一些缺點，至少編碼規範上有了一個質的飛躍，學習上手的週期比較短。vue起初只是一個輕量級的類庫，用來作相似於react的事情，同時vue也是能夠拿來作前端架構設計的，好比：vueify + vue-router（spa框架）。

 

vue學習地址：http://cn.vuejs.org/

 

以上說了那麼多沒用的，下面就來點幹活了！

 

個人前端組件化架構設計，目錄以下：

 

 

項目架構用到的知識點，仍是挺多的，知識清單以下：

 

［1］:   gulp + webpack 構建打包工具， 使用了一系列的loader，好比：vue-loader,  sass-loader, babel-loader , 以及 postcss，postcss-custom-properties，等等

 

[2]  :   postcss-custom-properties : 用來作樣式全局化, 只須要經過變量去維護，經過編譯變量既能夠換膚。

 

 [3]  :   vue-loader （vue文件組件化）:用來去編譯處理 *.vue 的文件，一個vue 文件就是一個單獨的組件，vue組件開發具備高獨立且易維護。組件的劃分可大可小，一個頁面也能夠看做成由多個vue 組件構成的，一個頁面也能夠是一個vue組件, vue 文件結構以下：

 

 

[4]  ： babel-loader  ：實現對vue文件中 es6 語法的編譯解析

 

 [5]  ： vue-router ：用來作路由分發，並且文檔很是的齊全（學習地址:http://vuejs.github.io/vue-router/zh-cn/index.html）。

 

 [6]  ： vue （插件式方式）：vue自己提供了一個install 方式用來注入，咱們能夠注入一些全局的(屬性、方法、以及通用的ui組件)。

 

下面說說文件夾的含義：

 

  common 文件夾: 是用來存一些通用的東西，好比樣式，以及全局的js等等

 

  components 文件夾：用來放獨立的組件，我打算後期作細分，ui 組件，以及page 組件等等，這裏面就是團隊的心血，之後就能作成獨立的組件庫了。

 

  filters 文件夾：用來放通用的過濾器操做。

 

  plugins 文件夾：用來放 Vue.use 注入到Vue全局的插件庫，好比：請求加載、彈框、分頁、ui組件 等等。plugins 只是把 componets組件暴露給 Vue全局。

 

  views 文件夾: 用來存放頁面模塊

 

  app.vue 文件：第一次啓動的主程序模塊

 

  app.js 文件：啓動前的加載，注入，實例化

 

  router.config.js 文件：路由模塊

 

目前該架構在先後臺的SPA架構都適用，可能仍是有不少不完善，不過我還很年輕，vue也還狠年輕，望各位道友多給咱們年輕人一些機會。