vue 安裝教程(自己安裝過程及遇到的一些坑)
1.安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)
2.基於node.js,利用淘寶npm映象安裝相關依賴
在cmd裡直接輸入:npm install -g cnpm –registry=https://registry.npm.taobao.org,回車,等待安裝...(windows使用管理員身份進行安裝)
3.安裝全域性vue-cli腳手架,用於幫助搭建所需的模板框架
在cmd裡 1)輸入:cnpm install -g vue-cli,回車,等待安裝...
2).輸入:vue,回車,若出現vue資訊說明表示成功
4.建立專案
在cmd裡輸入:vue init webpack vue_test(專案資料夾名),回車,等待一小會兒,依次出現‘git’下的項,可按下圖操作
5.安裝依賴
在cmd裡 1).輸入:cd vue_test(專案名),回車,進入到具體專案資料夾
2).輸入:npm install,回車,等待一小會兒
回到專案資料夾,會發現專案結構裡,多了一個node_modules資料夾(該檔案裡的內容就是之前安裝的依賴)
基於腳手架建立的預設專案結構如下圖所示:
6.測試環境是否搭建成功
方法1:在cmd裡輸入:npm run dev
方法2:在瀏覽裡輸入:localhost:8080(預設埠為8080)
執行起來後的效果如下圖所示:
問題:
在安裝過程中,你可能會遇到這個問題.
當我們執行某個專案是 會提示
> [email protected] dev C:\Users\ASUS\my-project > node build/dev-server.js To use this template, you must update following to modules: npm: 2.15.9 should be >= 3.0.0
這是隻有升級npm
即是 :使用 npm -g install [email protected]
檢視版本:
這時在專案中進行 npm run dev 時還是會 提示
因此還有一部關鍵的一步:
複製C:\Users\{你的Windows使用者名稱}\AppData\Roaming\npm\node_modules\npm下的檔案到你的 NodeJS安裝目錄下的 \node_modules\npm 中,覆蓋掉原有的全部檔案
最後執行 npm run dev 成功執行