前端開發 Vue Vue.js和Node.js的關系

 

淺談為什么vue前端項目要使用nodejs

一、傳統的JavaScript

傳統的js是運行在瀏覽器上的，因為瀏覽器內核分為兩個部分:

渲染引擎---渲染HTML和CSS,

JavaScript 引擎---負責運行 JavaScript,隨着技術的發展， Chrome 使用的 JavaScript 引擎是 V8，它的速度非常快且性能好，同時由2009年5月Ryan Dahl開發的Node.js 誕生。

二、什么是Node.js?

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 

Node 是一個讓 JavaScript 運行在服務端的開發平台，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言。 發布於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。

Node對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。V8引擎執行Javascript的速度非常快，性能非常好。 Node是一個基於Chrome JavaScript運行時建立的平台， 用於方便地搭建響應速度快、易於擴展的網絡應用。Node 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分布式設備上運行數據密集型的實時應用。

官網上對其特點描述為：

1. 它是一個Javascript運行環境

2. 依賴於Chrome V8引擎進行代碼解釋

3. 事件驅動

4. 非阻塞I/O

5. 輕量、可伸縮，適於實時數據交互應用

6. 單進程，單線程

相對於傳統的JavaScript來說，Node.js 是一個運行在服務端的框架，它的底層就使用了 V8 引擎。我們知道 Apache + PHP 以及 Java 的 Servlet 都可以用來開發動態網頁，Node.js 的作用與他們類似，只不過是使用 JavaScript 來開發，它大大提升了開發的性能以及便利。

 

（1）使用node開發還可以使用node自有配套的npm包管理工具：
NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：
允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。

Node.js 的使用包管理器 npm來管理所有模塊的安裝、配置、刪除等操作，使用起來非常方便。

（2）node本身就是一個服務端的框架，對於一些簡單的項目，我們可以不需要后端配合，直接用node進行數據庫的增刪改查（但是我們一般不使用這個功能）；

 

（3）nodejs是一個服務js平台，有自身帶的npm（基於 Node.js的前端項目包管理工具），有第三方的grunt（基於 Node.js的前端項目構建工具即即腳手架）、有第三方的express（路由功能）等強大的代碼與項目管理應用。還有自身帶的webpack（基於 Node.js的前端項目部署打包工具），v8（谷歌客戶端瀏覽器ｊａｖａｓｃｒｉｐｔ引擎）等強大的功能。

 

npm（包管理工具）是基於 Node.js的前端項目包管理工具，是項目中對各種程序包的依賴管理，傳統的開發項目主要是后端，現在技術在更新，前端有了框架的開發模式管理，也需要用包管理工具的思想去管理，目的是簡化第三方程序包在項目中引用復雜化。前端的ｊｓ包是全世界JavaScript 天才開發共享的各種代碼模塊，把這些代碼模塊都按照一個獨立的軟件功能統一在一個庫中，一個代碼模塊是一個程序包（package，即代碼模塊）。它是世界上最大的軟件注冊表，每星期大約有 30 億次的下載量，包含超過 600000 個 包（package） （即，代碼模塊），使用包的結構使您能夠輕松跟蹤依賴項和版本。　　官網：　https://www.npmjs.cn/

 

webpack是基於 Node.js的前端項目部署打包工具。

 

grunt是基於 Node.js的前端ＪａｖａＳｃｒｉｐｔ語言項目構建工具，即腳手架。一句話：構建項目自動化。對於需要反復重復的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工作。官網：https://www.gruntjs.net/

 

Express 是一個保持最小規模的靈活的 Node.js Web 應用程序開發框架，為 Web 和移動應用程序提供一組強大的功能。

 

三、Vue

首先vue.js 是庫，不是框架，不是框架，不是框架。

Vue.js 使用了基於 HTML 的模版語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。

Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。

vue.js 支持路由功能開發的 叫vue-route.js，vue.js支持數據請求功能開發的 叫vue-resource.js，李祥需求查資料求證？

vue.js 下載過來直接在html中引入就能使用，並不一定要npm install vue，那仕么業務開發需求場景下需要使用NPM呢？ＮＰＭ是仕么？

Vue.js可以在html里直接引用后使用，等到與Vue一起配合使用的第三方應用的庫或框架多起來后，一個個從html里引入就不方便了，所有要借用node.js中的npm管理包的引入，是方便包管理。

使用Vue.js開發的前端項目如何部署？我們用到node.js中的程序打包工具比如webpack（node.js中的程序部署打包工具），可以直接require引入之后將不同模塊打包成單個js文件。同時這些工具提供各種自動化處理，讓前端開發更爽。

Vue.js是數據驅動，和JQuery思路不同，你幾乎不需要自己進行復雜低效的dom操作，開發簡介明了。從這一點上說，可以基本拋棄JQuery了。

Vue.js開發有第三方支持的項目構建工具，vue-cli腳手架

通過上面的分析，與其說是VUE需要借助NODE開發前端項目，不如換個思路，在NODE中集成VUE開發前端項目，所以，先安裝Node,使用Node的npm先安裝Vue，然后再安裝vue-cli腳手架，最后通過vue-cli腳手架構建前端項目。

 

 

 再擴展一下思路：

上述我們解讀了Vue與Node的關系，從他們之間的關系，刨根問底，這個問題的本質是前端開發思想的問題，傳統前端開發只是CSS、CSS3、HTML、HTML5、傳統JS、面向對象JS（類似jQuery類庫）的開發，前端技術在近幾年發展迅速，如今的前端開發己不再是 10 年前寫個 HTML 和 css 那樣簡單 了，新的概念層出不窮，比如 ECMAScript 6、 Node.js、 NPM、前端工程化、輕量級模板引擎、模塊化(如vue模塊vue-require.js)、組件化、預編譯、雙向數據綁定、路由(如vue路由vue-route.js、前端路由的框架通用的有 Director、Angular 的 ngRouter、React 的 ReactRouter)、狀態管 理、動畫、、 SSR、前后端分離開發等。這些新東西在不斷 優化我們的開發模式，改變我們的編程思想。 隨着這些技術的普及，出現一套可稱為“萬金油”的技術技被許多商業項目用於生產環境：

 

jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)是一種前端開發方案

這套技術戰以 jQuery 為核心，能兼容絕大部分瀏覽器，這是很多企業比較關心的，因為他們 的客戶很可能還在用 IE7 及以下瀏覽器。使用 RequireJS 或 SeaJS 進行模塊化開發可以解決代碼依 賴混亂的問題， 同時便於維護及團隊協作。使用輕量級的前端模板（如 doT）可以將數據與 HTML 模板分離。最后，使用自動化構建工具（如 Gulp）可以合並壓縮代碼，如果你喜歡寫 Less、 Sass 以及現在流行的 ES 6，也可以幫你進行預編譯。 這樣一套看似完美無瑕的前端解決方案就構成了我們所說的傳統前端開發模式，由於它的簡 單、 高效、實用， 至今仍有不少開發者在使用。不過隨着項目的擴大和時間的推移，出現了更復雜 的業務場景，比如 SPA （單頁面富應用〉 、 組件解稍等。為了提升開發效率，降低維護成本，傳 統的前端開發模式己不能完全滿足我們的需求，這時就出現了如 Angular、 React 以及我們要介紹 的主角 Vue 。

 

        從綜合解決方案來講，Node.js邁出第一步，為前端工程化開發奠定了基礎，基於Node提供了項目腳手架、打包工具、包管理工具等等，基於Node誕生了Vue、Angular、 React等前端開發思想，以及組裝搭配的前端開發方案。

         在 Node.js 出現后，jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)開發組合又有了改善，就是所謂的大前端，得益於 Node.js 和 JavaScript 的語 言特性， html 模板可以完全由前端來控制，同步或異步渲染完全由前端自由決定，並且由前端維 護一套模板，這就是為什么在服務端使用 artTemplate、 React 以及 Vue2 的原因。說了這么多，到 底怎樣算是 SPA 呢？其實就是在前后端分離的基礎上，加一層前端路由。

         前端路由，即由前端來維護一個路由規則。實現有兩種，一種是利用 url 的 hash， 就是常說的 錨點（刑， JavaScrip／通過 hashChange 事件來監聽 url 的改變， IE7 及以下需要用輪詢：另一種就是 HTML5 的 History 模式，它使 url 看起來像普通網站那樣，以“／”分剖，沒有＃，但頁面並沒有 跳轉，不過使用這種模式需要服務端支持，服務端在接收到所有的請求后，在fl指向同一個 html 文 件，不然會出現 404。因此， SPA 只有一個 ht時，整個網站所有的內容都在這一個 html 里，通過 JavaScript 來處理。 前端路由的優點有很多，比如頁面持久性，像大部分音樂網站，你都可以在播放歌曲的同時 跳轉到別的頁面，而音樂沒有中斷。再比如前后端徹底分離。前端路由的框架通用的有 Director (ht刷：／／github.com/flatiron/director ），不過更多還是結合具體框架來用，比如 Angular 的 ngRouter, React 的 ReactRouter，以及本節要介紹的 Vue 的 vue-router。 如果要獨立開發一個前端路由，需要考慮到頁面的可插拔、頁面的生命周期、內存管理等 問題。

 

Node的webpack打包的核心思想就是單頁面富應用（SPA） 。 SPA 通常是由一個 h恤l 文件和一堆按需 加載的 js 組成，它的 html 結構可能會非常簡單，比如：
<!DOCTYPE html>

<html lang=”zh-CN”>

<head>

<meta charset=”UTF-8”>

<title>webpack app</title>

<link rel＝” stylesheet” href＝”dist/mai口 .css ”>

</head>

<body>

<div id=” app”></div> <script type=”text/javascript” src=”dist/main.j s ”></lcript>
</body>

</html>
看起來很簡單是吧？只有一個＜div＞節點，所有的代碼都集成在了神奇的 main扣 文件中，理論 上古可以實現像知乎、淘寶這樣大型的項目。 在開始講解 webpack 的用法前，先介紹兩個 ES6 中的語法 export 和 impo此， 因為在后面會大 量使用，如果對它不了解，可能會感到很困惑。 export 和 import 是用來導出和導入模塊的。 一個模塊就是一個js 文件，它擁有獨立的作用域， 里面定義的變量外部是無法獲取的。比如將一個配置文件作為模塊導出，示例代碼如下：

 

 

 以上幾個示例中，導入的模塊名稱都是在 export 的文件中設置的，也就是說用戶必須預先知道 這個名稱叫什么，比如 Config、 add。而有的時候，用戶不想去了解名稱是什么，只是把模塊的功能 拿來使用，或者想自定義名稱，這時可以使用 export default 來輸出默認的模塊。示例代碼如下：

 

 Node+Vue+ VueRequire+VueRoute+VueCli就是流行的前端開發方案。