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