為什么快速入門
實際工作中，很多的后端同學可能會寫一些前端的東西，經常發生的是，后端會吐槽不會寫CSS，JS的代碼寫的太難受。作為一名專業的前端，當然希望后端同學們能快速了解前端的一些概念，並順利的完成開發任務，於是寫下這篇文章來幫助后端同學們快速入門前端開發。
在瀏覽器端發生了什么
有一道經典的面試題是說：從瀏覽器輸入url到頁面渲染完成這一過程都發生了什么？這個問題可以說是一個非常常見的場景，足以涵蓋大量的計算機知識，可深可淺。我們來簡單的了解一下在瀏覽器端發生的過程，以此來學習前端的一些概念。一般情況下，一個url會對應了服務器上的一個HTML文件（這個叫網頁文件，格式類似於XML），瀏覽器獲得HTML文件后，開始解析並渲染HTML文件，遇到帶有src的link標簽，或帶有src的script標簽時，就會再去下載對應的CSS文件或JS文件。style和script標簽，也可以直接包含相應的語言內容，這樣瀏覽器就直接解析或執行了。什么是CSS文件呢？CSS(層疊樣式表)的內容是一些樣式的規定，規定了什么？HTML文件的主體內容其實是網頁的結構化的表示，其中的標簽都有一定特殊的含義，相當於網頁內容的骨架，而CSS文件則是骨架上的裝飾語，告訴了瀏覽器這些 結構內容的外貌。什么是JS文件呢？即Javascript腳本文件，JavaScript是一門運行在瀏覽器端的腳本語言，生動的網頁靠的就是JavaScript。所以瀏覽器發生的過程大致應該是，渲染HTML所聲明的網頁結構內容，根據CSS的規定來修飾這些結構，執行JavaScript來修改結構或賦予其中一些結構一些動作功能（白話，非真實過程）
三劍客
HTML、CSS、JavaScript，被稱為前端的三劍客。各有其功能，具體為什么是分開的三者就不糾結了。HTML主要是標簽內容，瀏覽器根據其內容來渲染網頁，在瀏覽器內部的表示是DOM樹（節點是DOM對象的樹這種數據結構）CSS有自己的語法，主要是選擇器加上樣式屬性，瀏覽器解析后對應到DOM樹來進行具體圖形的繪制javascript, 是一門動態語言，瀏覽器本身提供了大量的api來操作DOM樹，並且也有其他方面的api支持如canvas等三者的基礎知識可以通過w3schol或菜鳥教程這兩個網站來學習
網頁編程的演變
有時候可以看到以前的網頁，會發現那時的大多都是緊湊的文字，現在的網頁就變得十分復雜而且視覺效果更炫。 可以把網頁編程大致分為3個階段：
一階段: 大部分網站就是由許多的帶有大量文字的HTML組成，還有少量的CSS控制樣式。
二階段：得益於AJAX技術，網頁開始變得生動靈活，在AJAX之前提交信息到服務器就是表單提交，會刷新網頁，有了AJAX才能在不刷新網頁的情況下與服務器進行通信，互相傳遞數據，而且CSS也有所進步，開始注重網頁的用戶體驗，被稱為Web2.0時代。
三階段：即當前階段，並且還在繼續發展，持續演變。在之前的階段，網頁都是由服務器渲染好，傳給瀏覽器來展示，后台的服務器技術也出現了很多網頁模板框架，如jsp，asp，還有php這種混合寫法。目前網頁開發的一個典型代表就是SPA（單頁面應用），SPA的思想是一個網站只有一個HTML文件，用戶在網頁上的交互，網頁結構的變化都交給Javascript來控制，網頁對JS的要求就開始變高。
前端框架
目前流行的三大前端框架：React、Vue、Angular，三大框架各有特點，Vue易上手，Angular大而全，React生態好，總的來說都能勝任開發工作，具體對比可以自行搜索框架雖然有好幾個，但他們解決的問題其實是一個問題，即通過Javascript控制網頁。現代的JS框架都是MVVM框架了，在這些MVVM框架以前還有MVC框架如backbone.js，更簡單的就是直接一把梭，jquery來操作DOM，拼接HTML字符串這種來控制網頁。現代的MVVM（Model-ViewModel-View-Controller）主要改善了如何更新視圖（即操作網頁的DOM），通過操作數據，數據的變化映射到DOM的改變。避免了直接修改DOM。我們知道瀏覽器內部是有一個DOM樹來表示網頁的結構，前端框架一般會有一個虛擬DOM，來與之對應，當JS修改數據時，可能會影響虛擬DOM的變化，虛擬DOM變化后，會將其變化通過JS的DOM的API應用到瀏覽器的DOM樹上，進而觸發網頁的變化。前端框架還有一個特點就是組件化，通過將能重復利用的DOM結構封裝成可復用的組件來提高開發效率，但這種組件的封裝都跟框架有關，只適用於同一種框架。框架無關的WebComponent還在發展中。
前端構建
有很多語言在執行前都有一個編譯鏈接的過程如C，JS是運行在瀏覽器端的腳本語言，是不需要這種過程的，但現在前端項目也是有一個先構建再發布的過程的。當前的網頁開發主要就是JS的編寫了，傳統的網頁組織是手動的在HTML文件包含所需要的script鏈接和樣式的link鏈接，這種手段在大量的JS面前難以為繼，前端構建也是一個發展的過程，目前主要是依賴Webpack來構建。Webpack會由入口的JS文件出發，將其所有的依賴組成依賴圖，分割代碼成一塊一塊的。一般會在HTML里面生成幾個script標簽，再通過JS的異步獲取模塊能力來加載后續需要的JS模塊，具體的構建過程可以搜索了解。
nodejs
nodejs是JS在服務端運行的環境，基礎是chrome中的JS引擎V8。現代的網頁開發借助了nodejs的很多能力來提高開發效率和工程化開發，webpack就是典型例子。
所以開發的先決條件是安裝node.js，安裝完成后會帶有一個npm。npm是nodejs的包依賴管理工具，類似於其他語言，如maven，gem等。開發過程中會需要安裝大量的第三方JS包，所以要學習npm的用法（或者是另一個工具，yarn）。一些JS包會被webpack打包到項目中，一些則僅僅在開發過程中需要，可以研究學習一些項目的package.json文件，來明確這兩種的區別。
Vue快速入門
以Vue為例來快速入門前端項目，可以先根據Vue官網來學習框架的基礎知識，並跟着相應的指南來寫一下代碼例子。
典型的Vue項目，不僅有Vue框架，還有其全家桶（Vue-Router、Vuex）。試想，網站只有一個HTML文件時，那網頁跳轉怎么辦，在單頁面應用中的跳轉並不會引起網頁刷新，而是在其內部的router定義下變化，具體可以看Vue官網相應解釋，所以Vue-Router主要是解決的問題是應用的頁面與url路徑的關系。所以要先看項目的router文件的定義，來知道應用的每個頁面對應的Vue文件在哪？一個頁面一般是一個Vue實例，里面有許多的子組件也都是Vue的實例。
項目一般有一個main.js來初始化第一個Vue實例即根實例，然后掛載到具體的DIV上，一般是#app這個div， 其余的實例均是其子組件，渲染一般也都在#app內部。實際上Vue的SPA就是一個Vue組件樹。組件的相互交互有一定的規范來避免很多bug的產生，並提升代碼的可維護性，所以實際開發要參考Vue官網的代碼指南來避免一些不好的代碼操作。
概念補充
AJAX：Asynchronous JavaScript and XML，異步的JavaScript和xml。但目前都是傳遞json格式數據而非xml格式的數據了，是一種JavaScript利用瀏覽器發送請求與服務器通信而不需要刷新網頁的技術，利用的仍然是HTTP協議，所以重點還是在HTTP協議上，瀏覽器因為安全問題而對ajax有一些限制，如跨域的問題，解決方案現在都是cors了，以前是jsonp比較多。