配置Vue開發環境

阿新 • • 發佈：2019-01-21

配置VUE開發環境

1.在node.js官網下載node.js安裝包,然後安裝,如果不是用安裝包安裝的可能需要手動配置nodejs環境變數.
2.依次設定npm安裝和快取路徑:

//這裡路徑我指定的是nodejs安裝包所在的資料夾下
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

3.安裝淘寶映象

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.安裝webpack和vue-cli腳手架,在命令列中執行下列兩個命令，進行安裝。之後把D:\NodeJs\node_global;D:\NodeJs\node_modules;路徑新增到環境變數PATH中。

npm install webpack -g
npm install vue-cli -g  //一定要用npm,這步用cnmp是下載不全的

5.開啟命令列,在要建立vue專案的路徑下(vue.cmd所在路徑,例如D:\NodeJs\node_global)執行下面命令,這的等待時間可能會有點長,一旦出現任何選項,全都按enter選擇預設的選項,執行成功後會在專案路徑下發現新增的vue_demo資料夾,裡面就是所需的vue檔案

vue init webpack vue_demo   //vue_demo是要建立的vue專案名稱

6.在命令列中進入到專案路徑，然後執行npm install命令，安裝專案需要的依賴。

npm install

7.然後執行npm run dev命令，執行專案。

npm run dev

我的小意外:在執行npm install時報錯,然後將PAC切換為全域性模式,然後重新執行這條命令,就這樣兩種模式來回切換直到不報錯了.或者如果報錯原因是npm版本問題,那麼可以執行npm update -g進行更新,最後run就可以啦.

以上是我的安裝步驟,有參考帖子,還有大神耐心講解,所以記錄下來,忘記時可以看看,要記得將vue_demo檔案進行備份哦!