Vue開(kāi)發(fā)必備:Node.js油吭、NPM與VueCLI安裝全攻略

大家好侦啸,我是袁庭新。Vue CLI是基于Vue的應(yīng)用開(kāi)發(fā)提供的一個(gè)標(biāo)準(zhǔn)的腳手架工具贿讹。為應(yīng)用搭建基礎(chǔ)的框架結(jié)構(gòu),提供插件、開(kāi)發(fā)服務(wù)抵恋、Preset、構(gòu)建打包功能宝磨。

Vue CLI背后集成了現(xiàn)代化開(kāi)發(fā)的諸多功能弧关,通過(guò)簡(jiǎn)單的命令就可以完成"零配置"的項(xiàng)目環(huán)境搭建盅安。在安裝vue CLI前,需要先在自己的電腦上安裝Node.js和NPM世囊。安裝了Node.js才能使用npm别瞭,然后才能安裝Vue CLI。

1.安裝Node.js

1.1 什么是Node.js

Node.js發(fā)布于2009年5月株憾,由Ryan Dahl開(kāi)發(fā)蝙寨,是一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境,使用了一個(gè)事件驅(qū)動(dòng)号胚、非阻塞式I/O模型籽慢,讓JavaScript運(yùn)行在服務(wù)端的開(kāi)發(fā)平臺(tái),它讓JavaScript成為與PHP猫胁、Python箱亿、Perl、Ruby等服務(wù)端語(yǔ)言平起平坐的腳本語(yǔ)言弃秆。

Node.js對(duì)一些特殊用例進(jìn)行優(yōu)化届惋,提供替代的API,使得V8在非瀏覽器環(huán)境下運(yùn)行得更好菠赚,V8引擎執(zhí)行Javascript的速度非衬员快,性能非常好衡查,基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)瘩欺, 用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用拌牲。

為什么會(huì)有Node.js俱饿?

傳統(tǒng)意義上的JavaScript運(yùn)行在瀏覽器上,Chrome使用的JavaScript引擎是V8塌忽,Node.js是一個(gè)運(yùn)行在服務(wù)端的框架拍埠,它的底層就使用了V8引擎,這樣就可以使用JavaScript去編寫(xiě)一些服務(wù)端的程序土居,這樣也就實(shí)現(xiàn)了用JavaScript去開(kāi)發(fā)Apache + PHP以及Java Servlet所開(kāi)發(fā)的服務(wù)端功能枣购,這樣做的好處就是前端和后端都采用JavaScript,即開(kāi)發(fā)一份js程序即可以運(yùn)行在前端也可以運(yùn)行在服務(wù)端擦耀,這樣比一個(gè)應(yīng)用使用多種語(yǔ)言在開(kāi)發(fā)效率上要高棉圈,不過(guò)Node.js屬于新興產(chǎn)品,一些公司也在嘗試使用Node.js完成一些業(yè)務(wù)領(lǐng)域埂奈,Node.js基于V8引擎迄损,基于事件驅(qū)動(dòng)機(jī)制,在特定領(lǐng)域性能出色账磺,比如用Node.js實(shí)現(xiàn)消息推送芹敌、狀態(tài)監(jiān)控等的業(yè)務(wù)功能非常合適。

1.2 安裝Node.js

根據(jù)操作系統(tǒng)下載對(duì)應(yīng)版本的Node.js版本的安裝包垮抗。Node.js官網(wǎng)地址:https://nodejs.org/en/download氏捞。

長(zhǎng)期維護(hù)版(LTS):16.14.0(包含npm 8.3.1),推薦多數(shù)用戶使用冒版。在你的平臺(tái)上下載Node.js源碼或預(yù)編譯安裝包液茎,然后即可馬上進(jìn)行開(kāi)發(fā)。

1.2.1 Windows系統(tǒng)安裝Node.js

1.下載node-v16.14.0-x86.msi安裝包辞嗡。

2.雙擊安裝包捆等,根據(jù)窗口向?qū)崾具M(jìn)行安裝(注意:可根據(jù)磁盤(pán)使用情況,選安裝目錄進(jìn)行安裝)续室。

3.安裝完成后栋烤,在cmd窗口檢測(cè)是否安裝成功。

C:\Users\yuanxin> node -v
v16.14.0

1.2.2 macOS系統(tǒng)安裝Node.js

1.下載node-v16.14.0.pkg安裝包挺狰。

2.雙擊安裝包明郭,根據(jù)窗口向?qū)崾具M(jìn)行安裝(注意:點(diǎn)擊"安裝" ,需輸入您的密碼進(jìn)行安裝)丰泊。

3.打開(kāi)命令行執(zhí)行查看版本號(hào)node -v薯定,顯示版本信息,標(biāo)志安裝成功瞳购。

yuanxin@yuanxindeMacBook-Pro ~ % node -v
v16.14.0

2.安裝NPM

NPM全稱Node Package Manager话侄,它是Node包管理和分發(fā)的工具,使用NPM可以對(duì)應(yīng)用的依賴進(jìn) 行管理学赛,NPM的功能與服務(wù)端項(xiàng)目構(gòu)建工具M(jìn)aven的依賴管理功能類似年堆,我們通過(guò)NPM可以很方便 地下載js庫(kù),打包js文件罢屈。

2.1 自動(dòng)安裝NPM

Node.js已經(jīng)集成了NPM工具嘀韧。在命令提示符輸入npm -v可查看當(dāng)前NPM版本。

npm -v

2.2 查看包管理路徑

包路徑就是NPM從遠(yuǎn)程下載的js包所存放的路徑缠捌。使用npm con?g ls查詢NPM管理包路徑(NPM下載的依賴包所存放的路徑)锄贷。

npm config ls

我們發(fā)現(xiàn)NPM默認(rèn)的管理包路徑在(以Windows系統(tǒng)為例):

C:\Users\yuanxin\AppData\Roaming\npm

2.3 設(shè)置包管理路徑

依賴包放在C盤(pán)不太合適,為了方便對(duì)依賴包管理曼月,我們將管理包的路徑設(shè)置在單獨(dú)的地方谊却。

1.我們選擇一個(gè)路徑,專門(mén)存放這些依賴包哑芹。我選擇創(chuàng)建一個(gè)目錄:D:\programSoftware\npm炎辨。

2.在D:\programSoftware\npm下再創(chuàng)建npm_modules文件夾和npm_cache文件夾。

D:\programSoftware\npm\npm_modules
D:\programSoftware\npm\npm_cache

3.執(zhí)行下邊的命令聪姿,設(shè)置為自定義的包管理路徑碴萧。

# 設(shè)置全局模塊的安裝路徑
npm config set prefix "D:\programSoftware\npm\npm_modules"
# 設(shè)置緩存到npm_cache文件夾
npm config set cache "D:\programSoftware\npm\npm_cache"

4.此時(shí)再使用npm config ls查詢NPM管理包路徑發(fā)現(xiàn)路徑已更改乙嘀。

說(shuō)明:Mac OS系統(tǒng)NPM包管理路徑默認(rèn)在/usr/local/lib/node_modules/npm目錄下。

2.4 NPM環(huán)境變量配置

1.查看NPM的全局路徑破喻。

npm config get prefix

2.配置PATH環(huán)境變量虎谢。

(1) 添加新的系統(tǒng)變量。

key=NODE_HOME
value=D:\programSoftware\npm

(2) 為Path變量添加%NODE_HOME%\npm_modules路徑曹质。

%NODE_HOME%\npm_modules
%NODE_HOME%\npm_cache

3.查看包的安裝位置婴噩。

npm root -g

2.5 安裝CNPM

NPM默認(rèn)會(huì)去國(guó)外的鏡像下載js包,在開(kāi)發(fā)中通常我們使用國(guó)內(nèi)鏡像羽德,這里我們使用淘寶鏡像(CNPM)來(lái)加快下載速度几莽,因此只需要修改下鏡像的地址即可。

1.查詢當(dāng)前鏡像地址宅静。

yuanxin@yuanxindeMacBook-Pro ~ % npm config get registry
https://registry.npmjs.org/

說(shuō)明:默認(rèn)地址(https://registry.npmjs.org/)在國(guó)外章蚣,所以安裝緩慢或卡頓。

2.在聯(lián)網(wǎng)的狀態(tài)下坏为,更改鏡像地址究驴,設(shè)置為淘寶鏡像。

## 注意1:以管理員身份運(yùn)行cmd
## 注意2:切換至優(yōu)質(zhì)網(wǎng)絡(luò)環(huán)境下安裝CNPM
npm config set registry https://registry.npm.taobao.org

# npm install -g cnpm --registry=https://registry.npm.taobao.org

3.查看鏡像地址是否更換成功匀伏。

yuanxin@yuanxindeMacBook-Pro ~ % npm config get registry
https://registry.npm.taobao.org/

4.換成功后洒忧,返回VSCode中,重新使用npm install安裝組件够颠,安裝過(guò)程將暢通無(wú)阻熙侍。

5.查看CNPM版本信息。

cnpm -v

3.安裝Vue CLI

目前主流版本是3.x和4.x版本履磨,安裝4.x以上的版本是因?yàn)樵摪姹炯瓤梢詣?chuàng)建3.x項(xiàng)目與4.x項(xiàng)目蛉抓。注意,以管理員身份打開(kāi)命令行剃诅。

1.可以使用下列任一命令安裝這個(gè)新的包巷送。

npm install -g @vue/cli

2.安裝之后,可以在命令行中訪問(wèn)vue命令矛辕。通過(guò)簡(jiǎn)單運(yùn)行vue笑跛,看是否展示出了一份所有可用命令的幫助信息,來(lái)驗(yàn)證它是否安裝成功聊品。

vue

3.輸入vue -V檢查版本飞蹂。

vue -V

4.總結(jié)

本文主要介紹了 Vue 開(kāi)發(fā)環(huán)境的搭建步驟,重點(diǎn)圍繞 Node.js翻屈、NPM 和 Vue CLI 的安裝展開(kāi)陈哑。Node.js 是基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境,可在服務(wù)端運(yùn)行 JavaScript 程序,提升開(kāi)發(fā)效率惊窖,需根據(jù)操作系統(tǒng)下載對(duì)應(yīng)版本安裝包進(jìn)行安裝刽宪。NPM 用于管理應(yīng)用依賴,其與 Node.js 集成爬坑,文中還介紹了查看與設(shè)置包管理路徑纠屋、環(huán)境變量配置及安裝淘寶鏡像 CNPM 等操作涂臣。Vue CLI 是 Vue 應(yīng)用開(kāi)發(fā)的腳手架工具盾计,主流版本為 3.x 和 4.x 以上,安裝后可通過(guò)命令驗(yàn)證赁遗,為 Vue 項(xiàng)目開(kāi)發(fā)奠定基礎(chǔ)署辉。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市岩四,隨后出現(xiàn)的幾起案子哭尝,更是在濱河造成了極大的恐慌,老刑警劉巖剖煌,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件材鹦,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡耕姊,警方通過(guò)查閱死者的電腦和手機(jī)桶唐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)茉兰,“玉大人尤泽,你說(shuō)我怎么就攤上這事」媪常” “怎么了坯约?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)莫鸭。 經(jīng)常有香客問(wèn)我闹丐,道長(zhǎng),這世上最難降的妖魔是什么被因? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任卿拴,我火速辦了婚禮,結(jié)果婚禮上氏身,老公的妹妹穿的比我還像新娘巍棱。我一直安慰自己,他們只是感情好蛋欣,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布航徙。 她就那樣靜靜地躺著,像睡著了一般陷虎。 火紅的嫁衣襯著肌膚如雪到踏。 梳的紋絲不亂的頭發(fā)上杠袱,一...
    開(kāi)封第一講書(shū)人閱讀 52,696評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音窝稿,去河邊找鬼楣富。 笑死,一個(gè)胖子當(dāng)著我的面吹牛伴榔,可吹牛的內(nèi)容都是我干的纹蝴。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼踪少,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼塘安!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起援奢,我...
    開(kāi)封第一講書(shū)人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤兼犯,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后集漾,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體切黔,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年具篇,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了纬霞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡栽连,死狀恐怖险领,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情秒紧,我是刑警寧澤绢陌,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站熔恢,受9級(jí)特大地震影響脐湾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜叙淌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一秤掌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鹰霍,春花似錦闻鉴、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春渠羞,著一層夾襖步出監(jiān)牢的瞬間斤贰,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工次询, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留荧恍,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓屯吊,卻偏偏與公主長(zhǎng)得像送巡,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子雌芽,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容