VUE學習筆記之vue cli 構建項目

1、環境搭建：

　　1.安裝node.js

從node.js官網下載並安裝node，安裝過程很簡單，一路「下一步」就能夠了。安裝完成以後，打開命令行工具(win+r，而後輸入cmd)，輸入 node -v，以下圖，若是出現相應的版本號，則說明安裝成功

由於在官網下載安裝node.js後，就已經自帶npm（包管理工具）了，要意的是npm的版本最好是3.x.x以上，以避免對後續產生影響。

 

　　2.安裝淘寶鏡像

npm install -g cnpm --registry= https://registry.npm.taobao.org，安裝這裏是由於咱們用的npm的服務器是外國，有的時候咱們安裝「依賴」的時候超級慢，因此就用這個cnpm來安裝咱們說須要的「依賴」。安裝完成以後輸入 cnpm -v，以下圖，若是出現相應的版本號，則說明安裝成功。

 

　　3.安裝webpack

npm install webpack -g，安裝完成以後輸入 webpack -v，以下圖，若是出現相應的版本號，則說明安裝成功。

 

　　4.安裝vue-cli

npm install vue-cli -g，安裝完成以後輸入 vue -V（注意這裏是大寫的「V」），以下圖，若是出現相應的版本號，則說明安裝成功。

　　　　

 

2、項目構建：

經過上面4步，咱們已經準備好了環境和工具，接下來就開始構建項目

　　1.建立工程目錄

建立一個目錄來存放項目，這裏是:C:\vue-project  cd命令進入目錄下或安裝了git的能夠在該目錄下右鍵選擇Git Bash Here

　　　　

 

　　2.初始化構建項目

vue init webpack creditbank-manager，注意這裏的「creditbank-manager」 是項目的名稱能夠說是隨便的起名，可是須要注意的是「不能用中文」。

 1 $ vue init webpack creditbank-manager
 2 
 3   A newer version of vue-cli is available.
 4 
 5   latest:    2.9.3
 6   installed: 2.9.2
 7 
 8 ? Project name (creditbank-manager) //項目名
 9 ? Project name creditbank-manager
10 ? Project description (A Vue.js project) //項目描述
11 ? Project description A Vue.js project
12 ? Author (cwh)  //項目建立人
13 ? Author cwh
14 ? Vue build (Use arrow keys) 
15 ? Vue build standalone
16 ? Install vue-router? (Y/n) y  //安裝路由
17 ? Install vue-router? Yes
18 ? Use ESLint to lint your code? (Y/n) n  //語法檢測  建議no
19 ? Use ESLint to lint your code? No
20 ? Set up unit tests (Y/n) y   
21 ? Set up unit tests Yes
22 ? Pick a test runner (Use arrow keys)
23 ? Pick a test runner jest
24 ? Setup e2e tests with Nightwatch? (Y/n) y
25 ? Setup e2e tests with Nightwatch? Yes
26 ? Should we run `npm install` for you after the project has been created? (reco
27 ? Should we run `npm install` for you after the project has been created? (reco
28 mmended) npm
29 
30    vue-cli · Generated "creditbank-manager".
31 
32 
33 # Installing project dependencies ...
34 # ========================
35 # Project initialization finished!
36 # ========================
37 
38 To get started:   //啓動方式
39 
40   cd creditbank-manager
41   npm run dev
42 
43 Documentation can be found at https://vuejs-templates.github.io/webpack

 

 

　　3.安裝項目依賴

cd creditbank-manager 命令進入建立的項目目錄

安裝項目依賴：npm install

如出現如下錯誤：

　　　　執行:

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

　　　　再次 npm install

安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource，輸入：cnpm install vue-router vue-resource --save

　　4.啓動項目

啓動項目，輸入：npm run dev。服務啓動成功後瀏覽器會默認打開一個「歡迎頁面」，以下圖：

若是沒有啓動默認瀏覽器頁面，修改 config 下面 index.js

默認端口也是這裏修改

port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true

　　　　執行：npm run dev  服務啓動成功後瀏覽器會默認打開一個「歡迎頁面」，以下圖：