一、Node.js
1.什么是Node.js?
Node（或者說 Node.js，兩者是等價的）是 JAVAScript 的一種運行環(huán)境。在此之前，我們知道 JavaScript 都是在瀏覽器中執(zhí)行的，用于給網(wǎng)頁添加各種動態(tài)效果，那么可以說瀏覽器也是 JavaScript 的運行環(huán)境。那么這兩個運行環(huán)境有哪些差異呢？請看下圖：
簡而言之，Node 為我們提供了一個無需依賴瀏覽器、能夠直接與操作系統(tǒng)進行交互的 JavaScript 代碼運行環(huán)境！
2.下載步驟：
①下載。下載地址:https://nodejs.org/en/,可根據(jù)電腦系統(tǒng)版本、操作系統(tǒng)下載適合的版本
②安裝。雙擊安裝包，點擊Next，勾選使用許可協(xié)議，點擊Next，選擇安裝位置（可根據(jù)個人情況更換路徑。繼續(xù)點擊Next，點擊Install，點擊Finish完成安裝。
③添加環(huán)境變量。進入環(huán)境變量，編輯【系統(tǒng)變量】下的變量【Path】
安裝完成后可以進行驗證：win + r ,輸入命令：node -和npm -v（npm），彈出如：v16.14.0，那么就安裝成功了，一般來說npm速度相對較慢，繼而使用國內(nèi)的淘寶鏡像，安裝命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
④配置環(huán)境。現(xiàn)在你全局的倉庫是安裝在c盤下的，可以通過npm list -global命令查看；所以當你們使用npm安裝全局模塊的時候會安裝到c盤下面的文件夾，這會使得你c盤數(shù)據(jù)龐大，所以我們便可以修改默認存儲地址；但是如果你c盤本身比較大，不在乎多存的這點數(shù)據(jù)，那就可以忽略不計這一步。
在你安裝node的文件夾下新建兩個文件夾；node_cache(緩存文件夾)node_global(全局倉庫文件夾)
3.Node.js的作用
Node.js一發(fā)布，立刻在前端工程師中引起了軒然大波，前端工程師們幾乎立刻對這一項技術(shù)表露出了相當大的熱情和期待。上一次一種技術(shù)能被整個前端界如此關(guān)注那還是在幾年之前，那時候Ajax這個概念剛剛被提出來。讓JavaScript跑在server端，這個想法簡直太棒了。這下我們不用再去學那些php、Ruby、Java、Scala或者其他什么對前端來說奇怪的語言，也可以輕松地將我們的領(lǐng)域擴展到server端，多么美好的前景！
Node.Js的首要目標是提供一種簡單的、用于創(chuàng)建高性能服務器及可在該服務器中運行的各種應用程序的開發(fā)工具。
首先讓我們來看一下現(xiàn)在的服務器端語言中存在著什么問題。在Java、PHP或者.NET等服務器語言中，會為每一個客戶端連接創(chuàng)建一個新的線程。而每個線程需要耗費大約2MB內(nèi)存。也就是說，理論上，一個8GB內(nèi)存的服務器可以同時連接的最大用戶數(shù)為4000個左右。要讓web應用程序支持更多的用戶，就需要增加服務器的數(shù)量，而web應用程序的硬件成本當然就上升了。
Node.Js不為每個客戶連接創(chuàng)建一個新的線程，而僅僅使用一個線程。當有用戶連接了，就觸發(fā)一個內(nèi)部事件，通過非阻塞I/O、事件驅(qū)動機制，讓Node.js程序宏觀上也是并行的。使用Node.js，一個8GB內(nèi)存的服務器，可以同時處理超過4萬用戶的連接。
二．Vue
1.什么是Vue？
Vue是一個MVVM的漸進式javascript框架，它是初創(chuàng)項目的首選前端框架。Vue的目標是通過盡可能簡單的api實現(xiàn)相應的數(shù)據(jù)綁定和組合的視圖組件。
Vue框架是輕量級的，有很多獨立的功能或庫，在Vue里我們可以根據(jù)自己的項目來選用它的一些功能。Vue 的核心庫只關(guān)注視圖層，所以開發(fā)者關(guān)注的只是m-v的映射關(guān)系。
其中提到的“漸進式框架”和“自底向上增量開發(fā)的設計”是Vue開發(fā)的兩個概念。
Vue可以在任意其他類型的項目中使用，使用成本較低，更靈活，主張較弱，在Vue的項目中也可以輕松融匯其他的技術(shù)來開發(fā)，并且因為Vue的生態(tài)系統(tǒng)特別龐大，可以找到基本所有類型的工具在vue項目中使用。
2.Vue腳手架搭建
①已經(jīng)安裝過node.js之后和淘寶鏡像的話，vue的運行環(huán)境基本上就搭建好了，只需再安裝全局的webpack（命令行：npm install webpack -g ）和vue-cli腳手架工具（在命令行里輸入：npm install -g vue-cli ）就行了。
②輸入 vue init webpack mypro 回車創(chuàng)建項目：
③進入項目文件夾：cd mypro (cd + vue init webpack mypro 中的項目名字mypro)，回車進入項目文件夾：
輸入： npm install 初始化，安裝依賴包node_modules
④安裝完成后輸入：npm run dev 運行就行了。
3.Vue的作用
①控件自動跟數(shù)據(jù)綁定，提交表單到后臺的時候，可以直接使用data里面的數(shù)據(jù)值，而不需要再使用$("#id")那一套方法來獲取控件的值，對控件賦值也方便很多，只需要改變data的值，控件就會自動改變值。將復雜的界面操作，轉(zhuǎn)化為對數(shù)據(jù)進行操作。
②頁面?zhèn)髦岛蜖顟B(tài)管理
Vue的頁面?zhèn)髦悼晒┻x擇的方法非常多，比如使用子組件屬性傳值，比如使用頁面url參數(shù)的方法傳值，或使用vuex全局狀態(tài)管理的方法頁面?zhèn)髦档鹊取６_發(fā)的時，在頁面有多個參數(shù)的時候，頁面?zhèn)髦岛统跏蓟獜碗s很多。而vue直接將參數(shù)保存在對象里面，直接給子組件的屬性或vuex存儲一個對象就行了。
③模塊化開發(fā)、模塊化更新
就像第二點所說的，其實可以引申到模塊化開發(fā)。比如一個列表頁面里面有添加功能，有修改功能，這時我們可以通過引用子組件的形式，當子組件內(nèi)容更新的時候，修改主組件的數(shù)據(jù)，比如修改了一條數(shù)據(jù)后，我們需要列表頁同時刷新，但我們不希望改變原來列表頁的頁碼和搜索條件。假如你用原生開發(fā)來實現(xiàn)這個，需要寫很多業(yè)務邏輯保存上一個頁面的搜索條件和頁碼這些參數(shù)，但假如你用vue開發(fā)，將變得非常簡單。
④代碼可讀性
Vue天生具有組件化開發(fā)的能力，因此不同的功能基本都是寫在不同的模塊里面，代碼的可讀性非常高。當一個新手接手一個舊項目的時候，基本上可以做到一到兩天就能定位到要修改的代碼，并進行修改。
⑤基于強大的Nodejs，添加新的組件庫，基本一句npm命令就能安裝。比如當我需要使用axIOS組件的時候，直接npm install axios安裝一下，就可以使用axios這個組件。熟悉maven的同學估計很容易就能理解npm工具。
⑥主路由、子路由、主頁面、子組件的方式，可以讓我們徹底拋棄iframe。寫過前端的同學都知道，因為iframe的滾動條、和子頁面跟其他頁面的交互性這些原因、用戶體驗還是遠遠沒有單頁面架構(gòu)友好。而且使用Vue非常簡單方便地實現(xiàn)系統(tǒng)菜單、導航等固定布局。
⑦css模塊化：各個組件之間，可以使用相同的樣式名，但有不同的樣式屬性。比如組件A和組件B的button都綁定了class="btn", 但在兩個組件里，我們可以實現(xiàn)兩個不同的btn樣式屬性，互不影響。
