今天主要的核心話題是Vue.js和前端工程化。我將結合我這兩年多的工作學習經歷來談談這個，主要側重點是前端工程化，Vue.js側重點相對前端工程化，比重不是特別大。
Vue.js
Vue.js和React.js、Angular.js並駕齊驅號稱前端三大框架(前端最常用的這三大框架，大中小公司均采用)。
Vue.js是一個叫尤雨溪及其他的團隊開發的，不過早年是他自己獨立做出來的。這一點我覺得他很牛逼。
我覺得每個做開發的朋友們，都要有一個自己的開源項目，自己的開源項目可以是自己工作三到四年發現有很多地方是重復的，可以寫一個框架減少不必要的重復工作量，現在已經有很多人正在做，比如renren-security、jeesite等開源項目，通過它們很容易就可以寫出一個功能齊全的后台管理系統。也可以是自己開發中常用的某些組件，那些組件每次開發都要用，可以將其收集起來，針對其中某個api進行改造，比如Hutools這個開源項目在這個方面就做的挺不錯。又或者是在校的學生們，自己可以不斷實踐，寫寫圖書管理系統或者是根據學校某些需求定制一個系統出來，然后將其開源，我覺得這樣一來，對於以后畢業出來找工作也是很有幫助的。總而言之，開源項目可以是很多，它可以是一個電商系統、CMS、CRM或ERP之類的，也可以是讀書筆記、書籍收集、文章收集等。
關於Vue.js這部分，主要參考Vue.js的官方網站和一些開源項目
下面正式開講
工具
Devtools
Devtools其目的主要是用於瀏覽器調試Vue相關的項目(因為Vue.js中的標簽並不僅僅是html相關的，還有如el這類的標簽及其相關的dom關系等，這些都是常規的瀏覽器調試所不能做到的)
vue-devtools開源項目地址
圖文詳解vue.js devtools使用方法
使用Devtools調試對應的Vue.js應用程序，效果如圖:
Vue CLI
1.Vue CLI具有如下優點
(1)功能豐富
對 Babel、TypeScript、ESLint、PostCSS、PWA、單元測試和 End-to-end 測試提供開箱即用的支持。
(2)易於擴展
它的插件系統可以讓社區根據常見需求構建和共享可復用的解決方案。
(3)無需 Eject
Vue CLI 完全是可配置的，無需 eject。這樣你的項目就可以長期保持更新了。
(4)CLI 之上的圖形化界面
通過配套的圖形化界面創建、開發和管理你的項目。
(5)即刻創建原型
用單個 Vue 文件即刻實踐新的靈感。
(6)面向未來
為現代瀏覽器輕松產出原生的 ES2015 代碼，或將你的 Vue 組件構建為原生的 Web Components 組件。
2.Vue CLI的三種構建方式
第一種方式(常規)
npm install -g @vue/cli vue create hello-world npm run server
第二種方式(舊版本2.x)
npm install -g @vue/cli-init
vue init webpack my-project
第三種方式(GUI)
在git bash中輸入如下命令，即可創建vue腳手架項目:
vue ui
效果圖如下:
Vue Loader
Vue Loader的作用是解析和轉換 .vue 文件，提取出其中的邏輯代碼 script、樣式代碼 style、以及 HTML 模版 template，再分別把它們交給對應的 Loader 去處理。
Vue Loader官方指南
Vue Loader的例子很多，如圖所示:
從圖中我們就可以看出它們的職責和作用，正好驗證前面說的script（邏輯代碼)、style(樣式代碼)、template(html模板)。
換句話說，Vue Loader你可以理解為一個tomcat服務器，它不僅僅能解析jsp和servlet，還能處理css、html、js等前端三劍客。
核心插件
Vue Router
Vue Router文檔
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。
包含的功能如下:
(1)嵌套的路由/視圖表
(2)模塊化的、基於組件的路由配置
(3)路由參數、查詢、通配符
(4)基於 Vue.js 過渡系統的視圖過渡效果
(5)細粒度的導航控制
(6)帶有自動激活的 CSS class 的鏈接
(7)HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
(8)自定義的滾動條行為
Vuex
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
Vue服務端渲染
Vue.js 是構建客戶端應用程序的框架。默認情況下，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染為服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最后將這些靜態標記”激活”為客戶端上完全可交互的應用程序。服務器渲染的 Vue.js 應用程序也可以被認為是”同構”或”通用”，因為應用程序的大部分代碼都可以在服務器和客戶端上運行。
這個服務端渲染通常可以用node.js中的express框架，當然了，也可以用koa或者egg.js等。
資源列表
關於Vue.js學習方式，個人建議對HTML+CSS+JavaScript要掌握的比較好才行，不僅僅對前端而言，后端也亦如此。
為什么這么說呢？
通常來說做Java后台開發的，基本上前端也會。
另外從一位前端工程師的角度來看，前端的技術與后端相比，更新迭代更快，但是不變的還是前端三劍客那點東西。把握了這些基本上學任何前端框架都是一件很容易的事情。
正如Vue.js起步中所說的那樣:
官方指南假設你已了解關於 HTML、CSS 和 JavaScript 的中級知識。如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來吧！之前有其它框架的使用經驗會有幫助，但這不是必需的。
另外我一直認為，公司研發崗位，如開發人員、測試人員、運維人員、運營人員、產品人員等，至少要知道彼此在做什么以及彼此工作之間聯系，我覺得這樣會比較好，不然很容易會陷入一個死循環，你可以理解為”閉關鎖國”。
本次的Vue.js內部分享不算太多，只不過是全局概況一下，更多的內容，可以去官方網站上學習。
我覺得作為一名研發人員，一定要養成通過官網學習的習慣，像博客之類的可以作為一個輔助或者深入的學習方式。通過官方網站學習，我覺得總體可以讓你形成一個全局的認識，這種認識，可以讓你觸類旁通或舉一反三。
舉個例子說一下，最近因為某個電商項目二次開發，而該二次開發用的是ThinkPHP框架，雖然我沒有接觸過PHP方面的，但是我通過官網相關知識，一下就了解了它的大致，ThinkPHP是基於MVC的，而正好可以聯系到Java中的SSM,其也是基於MVC。
前端工程化
這一部分內容我將結合我的開發經歷和《前端工程化體系設計與實踐》這本書。
前后端分離
原始的前后端分離方式
前端把頁面模板寫好，后台將頁面模板改為jsp或者freemaker、volocity等動態模板語言。
曾經做的一個智能酒店項目就是使用這種方式。這樣做最不好的地方是，如果公司是前后端職責分明的話，前端每改動某個頁面時，都需要將修改的后發給后台人員，后台人員將其改為jsp。這樣一來效率及其低下，當然了，小公司是不會這么做的，小公司都是后台兼任前端的，自然就可以省去這些不必要的時間成本。
原始的前后端分離方式優缺點(以模板語言采用jsp為例):
優點:
(1)嚴格按照MVC模式，職責分明，效率還是挺高的，舉個例子說明，視圖(jsp)只負責展示數據而不做過多的邏輯判斷處理，過多的邏輯判斷應該交給控制器內部的業務邏輯方法進行處理。
(2)由於通常采用的是模板語言(jsp、freemaker、volocity等)，視圖里可以做一定的邏輯判斷和處理，因此不必嵌入大量的js，大量的js如果某一個有問題，將會導致整個有問題，比如寫一個ajax方法，但是參數沒有傳進去，這時頁面上將不會顯示數據，只會空白，只能用瀏覽器調試才能發現是哪里有問題，如果是jsp的話，直接就會報500錯誤(或者內部做一些處理，讓其跳轉到錯誤指定界面);
(3)減少HTTP請求(只需請求一次即可,如果頁面是html的話，需要大量的js函數請求后端路由，在一定程度上會增大服務器的壓力，導致頁面延遲);
(4)不用考慮瀏覽器兼容性(有些js的方式由於瀏覽器的兼容性而不能正常調用或者需要進行改動);
缺點:
(1)復用性較差(由於返回的不是json數據而是視圖，導致復用性不是特別好);
(2)過於依賴Java運行環境(需要servlet容器);
(3)前后端未分離，耦合性高，可讀性差(jsp中嵌入java代碼及其大量的jstl標簽，導致可讀性不好，耦合性也高，當然了，如果做一個良好的設計並遵循的話，耦合性是可以降低的，可讀性也是可以提高的);
總的來說，用jsp作為視圖展示，可復用性不是特別好，於是曾經的第二個項目LMS(智能門鎖系統)，視圖就變成了HTML，由Ajax作為前后端交互的支點。
用Ajax的優缺點如下:
優點:
(1)開發過程前后端脫離，通過接口進行JSON數據傳輸(職責分明更加明確);
(2)跨平台能力更強，依托於瀏覽器的支持(基本上人們常用的瀏覽器(谷歌、火狐、IE、360等)都支持)
(3)可復用性更好;
缺點:
(1)開發難度大，考慮瀏覽器兼容性;
(2)頁面請求過多(參考網站十大優化原則，其中一點優化原則是減少HTTP請求，過多的HTTP請求對於性能是十分消耗的);
(3)接口代碼需要新增很多(這一點我相信許多開發人員都有這樣的感觸);
(4)大量的邏輯判斷都需要使用js(前面我說過,js是不允許一丁點錯誤的，一旦錯誤，體驗很不好，至少jsp報錯500，可以讓其跳轉到一個友好的提示，而html就不行了，直接就沒有數據或者是如果牽扯到布局，直接會影響到用戶體驗);
總的來說，開發中一般兩者兼用。
不過后來，Vue.js、Angular.js、React.js火起來了，前后端分離實踐更佳的方式到來。
因為即便完全采用jsp作為視圖展示/采用HTML作為視圖展示或者兩者兼用，還是存在不少的問題的。這一點后面會講到的。
前端工程化
前端工程化的目的在於提高生產效率
前端工程化的衡量准則
三大衡量准則:
(1)從開發的角度衡量工程化，主要體現為”快”;
天下武功，唯“快”不破。做項目也是如此，特別是做產品原型，一定要快，快速做出來，然后使用mock套一些假數據，等待產品經理確認是其想要的，然后就可以開發的。從中也體現着“敏捷”。
(2)從測試的角度衡量工程化，主要體現為”快”和”准”;
“快”的主要體現在前端工程師和后端工程師並行完成之后的集成測試階段。
“准”的主要體現在集成測試階段對問題的准確定位。
什么是集成測試?
集成測試，也叫組裝測試或聯合測試。在單元測試的基礎上，將所有模塊按照設計要求（如根據結構圖）組裝成為子系統或系統，進行集成測試。
你可以將其理解為一輛車，車在沒有組裝成是一堆大大小小的零件，這些零件經過生產工人生產，組裝工人組裝，質量工人測試。零零散散的零件單個測試也許是沒有問題的，但是組裝成一輛車的時候，這個時候就可能會出現問題。
(3)從部署角度衡量工程化，主要體現為”穩”;
通常會使用持續集成工具(如Jenkins、 Travis CI等)，通常會將每一次開發人員的代碼提交進行編譯、測試、發布，如果編譯或測試有問題，直接就會將本次構建取消，回滾到穩定版本。這樣一來，可以確保”穩”。
前端工程化的進化歷程
前端工程化的3個階段
(1)本地工具鏈-工程化不等同於工具化;
工程化的核心並非工具。前端工程化是以規范工作流程為手段，以工具為實現媒介，其最終目的是為了提高研發效率以及保證Web產品的線上質量。
如果要給前端工程化一個明確定義的話，比較恰當的定義如下:
前端工程化是一系列工具和規范的組合，規范為藍本，工具為實現。其中規范如下:
a.項目文件的組織結構，比如使用目錄名稱區分源文件和目標文件;
b.源代碼的開發范式，比如使用既定的模塊化方案;
c.工具的使用規范，比如工程化自身的配置規范;
d.各階段環境的依賴，比如部署功能的實現需要目標服務器提供SSH全新;
另外工具鏈的統一，另一個好處是鞏固了流程的規范性，開發者使用統一的工具鏈、遵循統一的規范進行業務代碼的編寫，利於多人協作和程序維護。
試想一下:
假設你身處一個團隊，團隊中沒有任何的開發規范，遇到一些需求，往往這些需求是可以通過引入某一個框架來實現的，但由於沒有任何的限制，本來一個框架可以實現多個需求，但像前面提到的沒有任何規范限制，就變成了多個框架實現多個需求。這樣一來項目將會越來越亂，不利於團隊協作。我曾經就做過這樣的項目，深有感觸。
(2)管理平台-進一步淡化差異、加深規范;
管理平台形態的工程化需達到如下幾點:
a.淡化環境差異性，保證構建產出一致性;
b.權限集中管理，提高安全性;
c.項目版本集中管理，便於危機處理，比如版本回滾等;
管理平台形態將各個功能模塊的執行環境集中化，從各模塊實現角度來講與本地工具鏈基本一致。
(3)持續集成-前端工程化的目標是融入整體
即使進化達到管理平台形態，前端工程化方案所能解決問題的本質仍然只是將前端工程師與后端工程師的工作解耦。雖然提高了兩端的工作效率，但是各自的工作流卻是孤立的。前端有了構建和部署，后端也有了相應的階段，兩方的工作流是分離的，最終的融合工作仍然難以避免繁瑣的人工操作。
舉個例子，比如后端修改了某個接口，前端某個dom與這個接口關系緊密，接口變化了，dom渲染也要隨之變化，但是由於工作流是分開的，前端工程師並不知道這一點。我們經常強調一點，要加強溝通，但是當項目緊急期到來時，每個人手里任務一大堆，這時溝通就可能會少了很多，這時像上面說的，接口發生變化時，前端工程師並不知情，直到因為某些操作發生問題時，才知道原來是接口變了。另外從某個角度來看，接口的設計原則應該是與前端相隔離的，但是實際中並非如此。
總結
今天主要分享的兩個知識點，一個是vue.js，另一個是關於前端工程化。
vue.js相關的demo，我已經放到我的GitHub上，感興趣的朋友可以將其git clone下來，
地址為:https://github.com/developers-youcong/blog-manage-system
前端工程化，用一句話來概括就是讓工具更好的服務於流程。從研發的角度看，使用技術實現業務(讓技術更好的服務於業務)。今天說的這個工程化核心就是工具與流程相結合起來，讓整個工作流緊密結合且效率提高。鑒於本次內部分享說的挺多的，目前這只是一部分。歡迎大家評論留言，最好還是提問題，問題讓思考更深刻。