一、環(huán)境搭建
1.安裝node.js缰犁，安裝完成后打開(kāi)命令行工具（win+r輸入cmd,）輸入 node -v淳地，如下圖怖糊，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功颇象，npm版本至少在3.x.x以上蓬抄。
2,安裝webpack，打開(kāi)命令行工具輸入：npm install webpack -g夯到。安裝完成之后輸入 webpack -v嚷缭，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)耍贾，則說(shuō)明安裝成功阅爽。
3,安裝vue-cli腳手架構(gòu)建工具，打開(kāi)命令行工具輸入：npm install vue-cli -g荐开，安裝完成之后輸入 vue -V（注意這里是大寫(xiě)的“V”）付翁，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)晃听，則說(shuō)明安裝成功百侧。
二、使用vue-cli構(gòu)建項(xiàng)目
創(chuàng)建一個(gè)總文件夾放項(xiàng)目能扒。如果已經(jīng)安裝了git佣渴，在剛建文件夾下右鍵選擇Git Bash Here直接打開(kāi)；或者在命令行工具中使用“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: --------------------- 說(shuō)明如何啟動(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è)歡迎頁(yè)面避咆， 默認(rèn)8080端口舟肉，確認(rèn)自己的8080端口未被使用。
至此查库，vue腳手架搭建完成路媚。
