windows下使用vue-cli

安裝node

根據自己的系統到官網下載對應的包:
在這裏插入圖片描述
解壓後把node.exe所在目錄添加到環境變量path裏面:
在這裏插入圖片描述
打開cmd輸入如下命令如果出現版本信息說明配置OK:
node -v
npm -v
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1GW8ATSC-1576122081635)(3.png)]

全局安裝vue-cli

cmd執行命令:npm install --global vue-cli

安裝過程需要消耗2分鐘左右,耐心等待:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dc6Ldcu9-1576122081636)(4.png)][外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2YAG9qzS-1576122081637)(5.png)]

創建項目

安裝完成後即可通過命令行創建項目,首先cmd命令行進入需要創建工程的路徑:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-v3GbYuEs-1576122081638)(6.png)]

使用命令創建工程:vue init webpack firstDemo,firstDemo就是工程名,安裝過程中會有一些常規詢問,可參考讓如下選項選擇,之後等待安裝完成,這個過程也需要消耗幾分鐘:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4Cz4xtM4-1576122081638)(7.png)]
在對應問價夾下就會出現工程文件:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Te1V4l8A-1576122081639)(8.png)]
安裝完成後可以依次執行如下兩個命令即可啓動應用:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X8XeBEjv-1576122081639)(9.png)]

注意:如果安裝完成提示上面有出現如下這樣的錯誤:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-x0LDheHg-1576122081640)(10.png)]
進入工程文件夾下面,刪除如下文件夾:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-MQJLmq2y-1576122081641)(11.png)]
然後在cmd中cd到項目目錄,依次運行命令:

npm install

這個命令會消耗幾分鐘,耐心等待

npm run build

提示如下後即可運行下面一條命令啓動應用:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yviBkPtJ-1576122081642)(12.png)]
npm run dev

啓動成功後即可通過瀏覽器訪問http://localhost:8080/:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-HlY6EbPJ-1576122081643)(13.png)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QevwjpCr-1576122081644)(14.png)]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章