第一次搭建vue操作環境,報了不少錯,沒搭建成功,然後這樣一步步來終於好了,將步驟簡單記錄下來:
第一步:下載下載node 安裝包進行安裝,下載地址::https://nodejs.org/en/ 或者 http://nodejs.cn/
第二步:點擊node安裝包開始安裝,安裝目錄自己定義(我的在D盤)。
安裝測試
HOME+R 輸入cmd打開命令行窗口 進入安裝路徑 輸入node -v
第三步:
1、在安裝路徑下的文件夾裏面,新建node_global和node_cache兩個文件夾
2、在建好上面兩個文件夾後,在黑窗口執行下面兩個命令:
設置緩存文件夾
npm config set cache "D:\node\node_cache"
設置全局模塊存放路徑
npm config set prefix "D:\node\node_global"
作用:設置成功後,之後用命令npm install XXX -g安裝以後模塊就在D:\node\node_global裏
第四步:基於 Node.js 安裝cnpm(淘寶鏡像)
npm install -g cnpm --registry=https://registry.npm.taobao.org
第五步:設置環境變量
1:新建:NODE-HOME
2:配置編輯path
打開命令行,輸入node -v,安裝環境變量後,輸入cnpm -v 如下,都出現版本號說明配置成功
第六步:安裝Vue
cnpm install vue -g
第七步:安裝vue命令行工具,即vue-cli 腳手架
cnpm install vue-cli -g
第八步:新項目的創建
1.打開存放項目的文件夾
打開開始菜單,輸入 CMD,或使用快捷鍵 win+R,輸入 CMD,敲回車,彈出命令提示符。打開你將要新建的項目目錄
2.根據模版創建新項目
vue init webpack demo1
接個簡單的圖:
第九步:啓動 執行 npm run dev 或者 npm run dev
這裏是最後一個坑:npm run dev 時報錯 ,package.json找不到
npm ERR! path F:\vueTest\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'F:\vueTest\package.json'
npm ERR! enoent This is related to npm not being able to find a file. n
其實是沒進入到文件目錄裏,一定是進到文件的目錄中再去npm run dev 就不會報錯了! 再下面圖片這個地方進行項目啓動!!!
這樣纔會成功:
成功頁面: