"" ) 為什麼想寫這篇文章 工作這些年我所做的事情總是迴圈著，剛工作的時候html、js、jQuery用的也很溜，可是後面的七年都沒寫過前端代碼。現在由於項目原因，時不時的需要去寫點前端代碼，可是前端的世界已經在nodejs的幫助下發生了翻天覆地的變化，一個又一個的框架層出不窮。這篇文章記錄下我這 ...
為什麼想寫這篇文章
工作這些年我所做的事情總是迴圈著，剛工作的時候html、js、jQuery用的也很溜，可是後面的七年都沒寫過前端代碼。現在由於項目原因，時不時的需要去寫點前端代碼，可是前端的世界已經在nodejs的幫助下發生了翻天覆地的變化，一個又一個的框架層出不窮。這篇文章記錄下我這一路披荊斬棘遇到的前端技術。一來幫助自己梳理知識體系，二來幫助前端新手明確學習路徑和學習目標。
vue項目的技術棧
我目前的項目用的是vue2，這裡羅列的也都是基於vue或者vue整合的技術。基本上按照順序把一個一個技術搞懂了，用vue做個前端項目是沒什麼問題了。
nodejs
Node.js就是運行在服務端的JavaScript。是一個基於Chrome V8 JavaScript引擎的JavaScript運行環境。在node.js出現之前，JavaScript是只能在瀏覽器中運行的，Node.js的出現可以讓開發像寫python一樣在命令行寫JavaScript。
nvm
nvm是一個node.js的版本管理工具。可以幫助開發管理本地使用的多個node.js版本。
npm、yarn
npm是一個js的包管理工具，它的出現真的是讓前端技術飛速發展。它做的事情就想java中的maven。
yarn和npm一樣是個js的包管理工具，不過它在下載依賴時會做全局緩存，不會重覆下包。
vue
vue是一套構建用戶界面的漸進式框架。它最大的優勢就是組件化，用這個框架可以把很多元素封裝成組件，最後功能的開發變成了組件的拼裝，極大的提高了代碼的復用。
vue-cli
vue-cli是一個腳手架，能幫助開發快速創建一個vue項目。
bootstrap
bootstrap是一個前端技術的開源工具包。雖然bootstrap提供了js庫，但是很多項目更多的主要是使用了它的css樣式庫。
bootstrap-vue
bootstrap-vue是一個vue的組件庫，把bootstrap的組件封裝成了vue的組件。
ramda
ramda是一個函數庫，提供了很多處理js對象的方法。
axios
axios是一個前端非同步執行http請求的ajax框架。
karma
karma是一個測試運行器，可以讓測試跑在一些主流的瀏覽器中。karma不是測試框架，它只是啟動了一個HTTP服務，所以你需要在karma啟動時配置測試框架。karma支持多種測試框架：jasmine，mocha，QUnit
mocha
mocha是一個單元測試框架，用它可以更容易的測試非同步執行的方法。而且可以產出一個漂亮的測試報告。
chai
chai是一個斷言庫，它封裝了很多方法，能讓開發寫出更接近自然語言的代碼（語義化編程）。一般它會和Mocha一起使用，就像Junit和Hamcrest配合使用一樣。
validate.js
validate.js是一個用來做驗證的框架，它提供了很多現成方法來幫助開發實現表單驗證功能。
sinon
sinon是一個mock工具。可以和各種測試框架配合使用。就像java里的mockito。
eslint
eslint是一個代碼格式靜態檢查的工具。由於ECMAScript和前端框架的發展，現在很多前端項目也有了編譯過程，語法靜態檢查能夠讓一些打包發佈時才能發現的問題在編碼時就暴露出來。
pug
pug是一個高性能的模板引擎。html的語法格式很嚴謹，但也很冗餘。pug使用了一種簡潔的語法來寫html，用更少的代碼傳遞更多的信息。
stylus
stylus是一個css的預處理框架。其本質上做的事情與sass/less等類似。可以讓開發用一種簡潔的語法編寫有邏輯的css。
store
store提供了友好的介面來操作瀏覽器的local storage。
js-cookie
js-cookie提供了友好的介面來操作cookies。
babel
babel一個JavaScript編譯器。Babel通過語法轉換器支持最新版本的JavaScript。這些插件允許你立刻使用新語法，無需等待瀏覽器支持。
webpack
webpack是JavaScript應用程式的靜態模塊打包器(module bundler)。它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。
echarts
echarts是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）。
其他一些我用過的前端技術
現在前端的技術真的可以用多如牛毛來形容，一些偶然的機會，我還用過一些前端技術羅列在下麵。
yeoman
yeoman是一個腳手架工具，幫助開發人員快速創建新項目。
grunt/gulp
grunt和gulp是兩個構建工具，可以定義任務，對前端項目中的js和css進行編譯、壓縮、合併等操作。有點像java中的ant。如果用了webpack，其實就可以不用grunt和gulp了。
參考
日期:2018-08-08 作者:辵鵵
