大家好侦啸，我是袁庭新。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ǔ)署辉。
