此處介紹的是windows7系統64位下vue開發環境搭建,個人搭建成功后用于記錄或小白參考,望各位糾正!
一、安裝node.js(https://nodejs.org/en/download/)
1.打開node.js官網,選擇適合自己的版本并下載。(本人這里是win764bit系統,下載的是node-v10.15.0-x64.msi)
下載node.js
2.雙擊安裝包,進行安裝
安裝node.js1.jpg
①:點擊next
安裝node.js2.jpg
②:勾選接受,點擊next
安裝node.js3.jpg
③:選擇將要安裝的目錄,點擊next(我這里安裝在D盤nodejs文件夾下)
安裝node.js4.jpg
④:此處選擇默認,繼續點擊next
安裝node.js5.jpg
⑤:點擊Install進行安裝
安裝node.js6.jpg
⑥:安裝完成點擊Finish
二、基于node.js 安裝cnpm(淘寶鏡像)
1.打開控制臺輸入npm -v
查看npm版本(使用cnpm鏡像需要npm 版本需要大于 3.0,如果低于此版本需要升級)
查看npm版本.jpg
2.使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝cnpm, 并使用cnpm -v
查看cnpm版本安裝cnpm完成.jpg
三、使用cnpm安裝vue
cnpm install vue -g
安裝vue.jpg
四、安裝vue命令行工具,即vue-cli 腳手架
cnpm install vue-cli -g
安裝vue-cli并查看vue版本.jpg
注:查看vue版本使用
vue -V
五、創建vue項目
1.打開存放新建項目的文件夾
項目存放文件夾.jpg
2.根據模版創建新項目
在當前目錄下輸入“vue init webpack 項目名稱(使用英文)”。
vue init webpack my-project
①:創建項目 填寫項目名稱、描述、作者...
創建項目.jpg
②:安裝所需的依賴包文件
安裝依賴.jpg
③:進入項目文件夾并,使用
npm run dev
進行安裝進入項目.jpg
④:項目創建成功,進入http://localhost:8080/運行
運行.jpg
⑤:在瀏覽器中輸入http://localhost:8080/,輸出結果如下所示:
運行結果.jpg