Vue-----環(huán)境搭建和常見問題整理

說明:

  1. 涵蓋內(nèi)容:整理以Webpack方式初始化Vue項(xiàng)目的流程
  2. 環(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

解決辦法:

  1. 查看自己的 /etc/hosts文件(Mac系統(tǒng)),有沒有固定的github的ip地址映射

    有則進(jìn)行刪除,最好是進(jìn)行重新配置

  2. 可分別在如下配置中找到延遲低且用ping命令檢查ip地址,加速github下載
    http://ping.chinaz.com/https://github.com
    http://ping.chinaz.com/https://github.global.ssl.fastly.net

  3. 然后配置在hosts文件中,如下(要自己親自執(zhí)行上面的步驟獲取,請(qǐng)勿盲目抄下面的配置):

# git-hub 下載加速DNS
192.30.255.113 github.com
151.101.229.194 github.global.ssl.fastly.net
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容