搭建 vue 開發環境: node.js安裝+vue腳手架

第一次搭建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 就不會報錯了! 再下面圖片這個地方進行項目啓動!!!

 

這樣纔會成功:

成功頁面:

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