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