vue前端開發那些事——前言

如上圖所示，用vue開發一個小型網站所涉及到的知識點。這只是前端部分已經這麼多了。接下來我分解開來講。

一、Node

   當咱們開發vue項目的時候，首先要安裝Node.js,那麼咱們即便當時不理解爲何，可是項目完成後，應該抽個空，理解下。有兩個問題：

   a、什麼是Node？

   b、Node能作什麼？

   c、它與Vue項目有什麼關係？

  Node是一個服務器端框架，它所使用的語言是前端很是流行的JavaScript，它集成了JavaScript的解釋器 chrome v8——chrome瀏覽器底層使用的引擎。js能夠運行在服務器端，這是一個突破，以往咱們認爲js離不開瀏覽器。

  Node採用事件驅動模型，它能響應併發量在瞬間很大的應用程序。傳統的服務器框架，如IIS和Apache，當客戶端發起一個http請求時，服務器端就得分配一個線程去響應。由於併發量大，因此瞬間得不少個線程啓動，咱們知道一個線程會佔用系統必定的資源。當一臺服務器不夠使用的時候，那麼就得多加幾臺。成本天然就很高。node剛好在這方面是擅長的，它對用戶的大量的請求，首先緩存到一個隊列裏，而後再處理。也就是說，它的處理不會阻塞。

二、npm

     npm是基於node開發的一個js包管理器。在vue中，咱們須要不少第三方的js模塊，用npm管理起來，特別方便。npm install  命令用的比較多，它用來安裝。固然也有卸載、更新等其它命令。

三、webpack

      webpack是作什麼的呢？它負責編譯打包（專門針對js模塊打包的），這個工做量比較大。而Vue項目中有css文件、圖片、ES6（比較新的js版本）、vue組件等等。這就須要webpack在打包以前，先轉換這些文件。因而就出現了各類Loader，這些Loader是由webpack提供的。ES6，某些瀏覽器不支持，因此經過一個叫Babel的東西（一個js的編譯器）來編譯，轉換成傳統的js語法。

    咱們使用了不少js模塊，在模塊化概念出現之前，咱們應用某個庫，直接引用js文件便可。若是引用順序不對，那麼某些功能就會出錯。好比說，我要用jquery form提交，先引入jquery、而後引入jquery form.js 這樣 ok，可是順序反了的話，就出問題了。當模塊化流行之後，各個模塊之間的依賴關係比較複雜，人工維護顯然效率低，還容易出錯，這時，webpack應運而生。

   webpack的配置項比較多，比較關鍵的一點是要弄清楚配置中的路徑。它的打包須要知道包的物理路徑，而咱們項目中使用相對路徑，全部它用Resolve映射，至關於.net 中的Server.MapPath方法。有兩個點，我以爲對開發者來講，很是方便。一、代碼更改時，當即編譯  二、當編譯後，頁面當即刷新過來了。  多麼happy的功能啊。要不，你還得運行編譯的命令以及不停地F5。這一切得益於兩個東東：webpack-dev-middleware和 webpack-hot-middleware。關於它們的實現，有興趣的同窗，能夠在網上查看。

四、ES6

  在網上搜了一張圖，覆蓋了好多知識點。以下圖所示：

 

 

  4.1  與以往版本比較，變化比較大的有，模板字符串，它告別了js字符串和變量拼接的寫法，尤爲在jquery時代，常常操做dom，好比ajax成功後，須要在一個div裏面加載結果（html代碼）。它和c# 6中的字符串插值相似，當橫向比較的時候，你發現會很是有意思。

       

    這是我在網上截取的一個例子。你能夠認爲這些是語法糖，可是不管從可讀性，仍是簡潔性（優雅），都比format強不少。再看看ES6中的模板字符串：

 

　　

    它們是多麼的類似。請問，中國處於「大唐」時期，那麼西方處於什麼時代？這只是一個橫向比較的思惟。

    4.2  塊級做用域 let

         什麼是塊級做用域？好比for循環，在循環體內聲明的變量，按道理，在體外是不能訪問到的。可是js是個例外，js的var聲明的變量，在代碼解釋執行的時候，會提到最前面。因此這一點每每被一些開發者所詬病。如今出了個let，這本沒有什麼大驚小怪的，前端的語言語法在向服務器端靠近，好比常量聲明const，c#中也有，class這就不用說了。

   4.3  箭頭函數

     js中的箭頭函數，不就是和c#中的 Lambda 表達式同樣嗎？

    var materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ];

     materials.map(material => material.length); // [8, 6, 7, 9]

    c#中的委託的用意不就和js中的回調同樣嗎？在js中傳遞函數，很普通（function名稱仍是一個變量），但c#中傳遞一個方法，須要委託。

 4.4  解構賦值

     這個與python的有點像。

4.5  模塊化

    import 和export，目前瀏覽器兼容性不是很好，用的時候，使用babel。

好了，在進入vue開發前，先鋪墊一些知識點。