說明:
- 涵蓋內(nèi)容:整理以Webpack方式初始化Vue項(xiàng)目的流程
- 環(huán)境:mac環(huán)境
1. 下載安裝Node.js
- 如果已經(jīng)安裝不想使用老版本/node安裝失敗,先進(jìn)行卸載
sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d
- 最后驗(yàn)證一下(command not found表示成功卸載)
node //command not found
npm //command not found
- 然后進(jìn)行下載,下載網(wǎng)址:node官方中文網(wǎng)下載(根據(jù)自己計(jì)算機(jī)環(huán)境選擇合適的Node.js版本進(jìn)行下載)
記下安裝最后頁面的安裝路徑信息
Node.js v12.16.1 to /usr/local/bin/node
npm v6.13.4 to /usr/local/bin/npm
- 檢驗(yàn)node.js是否加入到環(huán)境變量中
node -v
npm -v
2. 配置npm使其更好用
- 賦予npm路徑權(quán)限,在后續(xù)安裝的時(shí)候,可能存在無目錄寫權(quán)限的情況,這里簡(jiǎn)單賦予其最高權(quán)限
sudo chmod -R 777 /usr/local/lib/node_modules/
- 全局模式安裝cnpm淘寶鏡像,方便進(jìn)行快速下載各種npm管理的包(當(dāng)然可以選擇npm管理模式,切換多個(gè)鏡像路徑)
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安裝webpack(全局安裝)
npm install webpack -g
如果安裝卡住了,或者安裝不上,可以嘗試:
cnpm install webpack -g
4.安裝vue手腳架(這里針對(duì)于一個(gè)博客解釋的webstrom全局安裝報(bào)錯(cuò),選擇非全局安裝)
- 針對(duì)WebStrom報(bào)錯(cuò):can not install ‘ij-rpc-client’/npm ERR!
該博客地址:https://blog.csdn.net/weixin_34277853/article/details/91418387
npm install vue-cli
5.初始化Vue工程
vue init webpack [你的工程名]
- 當(dāng)vue init webpack 第二步卡住的情況
這個(gè)博客分析原因有誤,應(yīng)該是github連接問題,不是下載webpack模板的問題
博客地址:https://blog.csdn.net/qq_23875297/article/details/56359262
解決辦法:
-
查看自己的 /etc/hosts文件(Mac系統(tǒng)),有沒有固定的github的ip地址映射
有則進(jìn)行刪除,最好是進(jìn)行重新配置
可分別在如下配置中找到延遲低且用ping命令檢查ip地址,加速github下載
http://ping.chinaz.com/https://github.com
http://ping.chinaz.com/https://github.global.ssl.fastly.net然后配置在hosts文件中,如下(要自己親自執(zhí)行上面的步驟獲取,請(qǐng)勿盲目抄下面的配置):
# git-hub 下載加速DNS
192.30.255.113 github.com
151.101.229.194 github.global.ssl.fastly.net