vue-cli搭建vue項目環境

該篇文章是繼https://www.cnblogs.com/qing-5/p/11321585.html來寫

一、打開終端，輸入指令"npm install --global vue-cli",來安裝vue -cli腳手架。

   該方法可能會出錯，以下所示。

/usr/local/lib/node_modules Error: EACCES: permission denied, access '/usr/local/lib/node_modules' npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']

緣由：執行命令是沒有得到管理員權限

解決方法1：將指令"npm install --global vue-cli"改爲  "sudo npm install --global vue-cli"，回車以後，須要輸入管理員密碼來授予權限。

解決方法2:輸入指令"sudo npm install -g cnpm --registry=https://registry.npm.taobao.org"，直接安裝淘寶鏡像cnpm，以後輸入指令「sudo cnpm install --global vue-cli」用cnpm安裝vue-cli

二、終端輸入「vue」檢測是否安裝成功，以下圖顯示

三、在終端輸入指令「cd Desktop」切換到桌面，以後輸入「vue init webpack Travel」，回車，在桌面建立一個基於webpack的vue項目放到Travel中。具體顯示如圖

四、終端輸入「cd Travel」，回車，輸入「cnpm install」，這一步在終端上沒有提示，可是不輸入該指令在個人項目上就會出錯「Local package.json exists, but node_modules missing, did you mean to install?」。

輸入「cnpm install」會安裝模板中的package.json中的依賴，安裝完成後會在項目文件夾下自動生成node-modules文件來存放這些依賴文件

五、以後再次輸入「npm run dev」，回車。注意，這個指令中必須是npm，而不是cnpm。最終成功顯示以下圖。

六、vue-cli生成的文件目錄