1. 程式人生 > >vue2.0環境搭建

vue2.0環境搭建

 

安裝node.js

      下載地址 https://nodejs.org/zh-cn/  (下載長期使用版本就行,下載完了雙擊傻瓜式安裝,)

      安裝完了之後開啟命令視窗 快捷鍵  win+R 輸入 cmd 回車 

      輸入 node -v npm -v  如果顯示了版本號 說明已經安裝成功!!!

 

安裝淘寶映象

      接下來安裝cnpm,因為許多npm包都是在國外,安裝起來特別慢,所以使用淘寶的映象伺服器。

      安裝命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 

 

安裝webpack

      安裝命令:cnpm install webpack -g

 

安裝vue腳手架

      安裝命令:cnpm install -g vue-cli

      安裝完後,可以輸入vue,然後回車,如果出現vue的資訊,則說明安裝成功了。

 

建立專案

     D: 可以進入D盤

     cd  資料夾名    進入資料夾

     vue init webpack my-vue(專案資料夾名)   回車之後等一會之後會要求輸入一些專案資訊

     Project name  ----專案名稱,使用英文

     Project description   ----專案描述,可寫可不寫

     Author Datura ----專案建立者,可寫可不寫

     Vue build   ----直接回車

     Install vue-router? (Y/n) Y ----是否安裝Vue路由,我選擇的是

     Use ESLint to lint your code? (Y/n) n ----是否啟用eslint檢測,我選擇no

     Set up unit tests? (Y/n) n ----是否建立單元測試,我選擇no

     Setup e2e tests with Nightwatch? (Y/n) Y---設定e2e測試 我選擇的是

    完事之後進入到剛剛建立的資料夾下就可以看到我們的專案,如圖

安裝專案依賴

     一定要從官方倉庫安裝,npm 伺服器在國外所以這一步安裝速度會很慢。

     安裝命令:npm install

     不要從國內映象cnpm安裝(會導致後面缺了很多依賴庫)

     安裝命令:cnpm instal

 

安裝 vue 路由模組 vue-router 和網路請求模組 vue-resource

    安裝命令:cnpm install vue-router vue-resource --save

 

啟動專案

     啟動命令:npm run dev   (如果看到下圖顯示就代表已經啟動了,將8080網址複製到瀏覽器就可以開啟)

 

如果瀏覽器顯示這樣的話就代表已經啟動成功了!!!~~~

預設埠是8080,如果電腦目前有其他的專案佔用了8080埠,專案啟動會報錯,可以在專案中config > index.js中找到port:8080直接修改成其他埠就可以了