一拙友、需要了解的基本知識(shí)
-
node.js
Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime)杠巡,發(fā)布于2009年5月派歌,由Ryan Dahl開發(fā),實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝含滴。Node.js對(duì)一些特殊用例進(jìn)行優(yōu)化诱渤,提供替代的API,使得V8在非瀏覽器環(huán)境下運(yùn)行得更好谈况。V8引擎執(zhí)行Javascript的速度非成酌溃快,性能非常好碑韵。 Node.js是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)赡茸, 用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用泼诱。Node.js 使用事件驅(qū)動(dòng)坛掠, 非阻塞I/O模型而得以輕量和高效赊锚,非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用治筒√胨ǎ總結(jié)一下,node,js提供了javascript在瀏覽器以外的一個(gè)執(zhí)行環(huán)境耸袜,滿足一些特定的場景需求友多。
-
npm
npm 是 nodejs 的包管理和分發(fā)工具。它可以讓 javascript 開發(fā)者能夠更加輕松的共享代碼和共用代碼片段堤框,并且通過 npm 管理你分享的代碼也很方便快捷和簡單域滥。通過npm可以更方便的引用和分析基于nodejs開發(fā)的類庫和插件。
-
webpack
WebPack可以看做是模塊打包機(jī):它做的事情是蜈抓,分析你的項(xiàng)目結(jié)構(gòu)启绰,找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言(Scss,TypeScript等)沟使,并將其打包為合適的格式以供瀏覽器使用委可。通過webpack可以把基于模塊開發(fā)的前端工程代碼打包成可以在瀏覽器使用的格式。
-
vue2
是一套構(gòu)建用戶界面的漸進(jìn)式框架腊嗡。與其他重量級(jí)框架不同的是着倾,Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層燕少,它不僅易于上手卡者,還便于與第三方庫或既有項(xiàng)目整合。另一方面客们,當(dāng)與單文件系統(tǒng)和vue生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí)崇决,Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動(dòng)。在開發(fā)中vue會(huì)把使用vue語法修飾的html標(biāo)簽與js對(duì)象進(jìn)行綁定底挫,從而使html值變化時(shí)可以同步修改js對(duì)象嗽桩,js對(duì)象值變化時(shí)可以在頁面暫時(shí),使開發(fā)從復(fù)雜的document操作中解脫出來凄敢。
-
iview
一套基于 Vue.js 的高質(zhì)量 UI 組件庫碌冶,通過iveiw可以快速的開發(fā)出風(fēng)格一致的前端界面。
二涝缝、node.js安裝
-
下載地址:https://nodejs.org/en/download/扑庞。
下載完成后安裝(直接按默認(rèn)方式安裝就行)
打開cmd 輸入下面的命令查看是否成功安裝
node -v
npm -v
三、搭建項(xiàng)目
1 .打開idea,新建項(xiàng)目
Create New Project > Static Web>填寫project name和選擇保存的工作空間>Finish
2.安裝vue腳手架工具
-
首先安裝npm的淘寶鏡像(下載速度比較快)拒逮,打開idea的Terminal
輸入以下的命令
npm i -g cnpm --registry=https://registry.npm.taobao.org
- 等待下載完成以后罐氨,繼續(xù)安裝vue的腳手架工具,在Terminal內(nèi)繼續(xù)輸入以下命令
npm i -g vue-cli
測試是否安裝成功:
vue -V
- 腳手架安裝完成后滩援,初始化包結(jié)構(gòu),繼續(xù)輸入
vue init webpack demo
- demo為你前面新建的項(xiàng)目名栅隐。初始化會(huì)進(jìn)行設(shè)置。可參考此處設(shè)置租悄。
-
初始化完成后谨究。依次在Terminal輸入圖片內(nèi)的黃色文字
-
完成后,會(huì)提示在哪個(gè)端口可以訪問泣棋,此處現(xiàn)在是8080
-
打開瀏覽器輸入:localhost:8080,出現(xiàn)以下畫面胶哲,簡單的demo就搭建完成了 。