一、環(huán)境搭建
1.安裝node.js，安裝完成后打開命令行工具（win+r輸入cmd,）輸入 node -v，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功，npm版本至少在3.x.x以上。
2,安裝webpack，打開命令行工具輸入：npm install webpack -g。安裝完成之后輸入 webpack -v，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。
3,安裝vue-cli腳手架構(gòu)建工具，打開命令行工具輸入：npm install vue-cli -g，安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。
二、使用vue-cli構(gòu)建項(xiàng)目
創(chuàng)建一個(gè)總文件夾放項(xiàng)目。如果已經(jīng)安裝了git，在剛建文件夾下右鍵選擇Git Bash Here直接打開；或者在命令行工具中使用“cd 目錄名稱”找到該文件夾。
vue腳手架搭建。輸入：vue init webpack project；（“project” 項(xiàng)目名稱，不能使用中文）。
$ vue init webpack project --------------------- 安裝vue腳手架的命令
? Project name (project) ---------------------項(xiàng)目名稱
? Project name project
? Project description (a Vue.js project) ---------------------項(xiàng)目描述
? Project description a Vue.js project
? Author Wjessie --------------------- 項(xiàng)目創(chuàng)建者
? Author Wjessie
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由
? Install vue-router? no
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測(cè)規(guī)則
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 說明如何啟動(dòng)這個(gè)服務(wù)
cd exprice
npm install
npm run dev
如下圖：
- 進(jìn)入創(chuàng)建的項(xiàng)目目錄：cd project（項(xiàng)目名稱）；
項(xiàng)目目錄如下：
-
安裝項(xiàng)目依賴：npm install；會(huì)有點(diǎn)慢，耐心等候哦！安裝完目錄會(huì)多一個(gè)node_modules文件夾。
簡(jiǎn)單介紹各個(gè)文件：
-
啟動(dòng)項(xiàng)目，輸入：npm run dev。服務(wù)啟動(dòng)成功后在瀏覽器中輸入：localhost：8080會(huì)出現(xiàn)一個(gè)歡迎頁面， 默認(rèn)8080端口，確認(rèn)自己的8080端口未被使用。
至此，vue腳手架搭建完成。
