今天主要的核心話題是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 除錯、狀態快照匯入匯出等高階除錯功能。

Vuex官方文件

Vue服務端渲染

Vue.js 是構建客戶端應用程式的框架。預設情況下，可以在瀏覽器中輸出 Vue 元件，進行生成 DOM 和操作 DOM。然而，也可以將同一個元件渲染為伺服器端的 HTML 字串，將它們直接傳送到瀏覽器，最後將這些靜態標記”啟用”為客戶端上完全可互動的應用程式。伺服器渲染的 Vue.js 應用程式也可以被認為是”同構”或”通用”，因為應用程式的大部分程式碼都可以在伺服器和客戶端上執行。

Vue.js服務端渲染指南

這個服務端渲染通常可以用node.js中的express框架，當然了，也可以用koa或者egg.js等。

資源列表

Vue.js官方倉庫
Vue.js優選
Vue.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

前端工程化，用一句話來概括就是讓工具更好的服務於流程。從研發的角度看，使用技術實現業務(讓技術更好的服務於業務)。今天說的這個工程化核心就是工具與流程相結合起來，讓整個工作流緊密結合且效率提高。鑑於本次內部分享說的挺多的，目前這只是一部分。歡迎大家評論留言，最好還是提問題，問題讓思考更深