目錄：
1. 架構選型
2. 架構目錄介紹
3. 架構說明
4. 招聘消息
目前如果要說比較流行的前端架構哪家強，屈指可數：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也還狠年輕，望各位道友多給我們年輕人一些機會。
最后發布一條招聘消息：
如果你有一顆想用代碼來改變世界的信念，那么你來就對了。