一崇猫、那么我們就從最簡單的環(huán)境搭建開始：
安裝node.js，從node.js官網(wǎng)下載并安裝node曼玩，安裝過程很簡單烘贴，一路“下一步”就可以了（傻瓜式安裝）羡儿。安裝完成之后，打開命令行工具(win+r早像，然后輸入cmd)僻肖，輸入 node -v，如下圖卢鹦，如果出現(xiàn)相應(yīng)的版本號(hào)檐涝，則說明安裝成功。
這里需要說明下法挨，因?yàn)樵诠倬W(wǎng)下載安裝node.js后，就已經(jīng)自帶npm（包管理工具）了幅聘，另需要注意的是npm的版本最好是3.x.x以上凡纳，以免對(duì)后續(xù)產(chǎn)生影響。
安裝淘寶鏡像帝蒿，打開命令行工具荐糜，把這個(gè)（npm install -g cnpm --registry=https://registry.npm.taobao.org）復(fù)制（這里要手動(dòng)復(fù)制就是用鼠標(biāo)右鍵那個(gè)，具體為啥不多解釋）葛超，安裝這里是因?yàn)槲覀冇玫膎pm的服務(wù)器是外國暴氏，有的時(shí)候我們安裝“依賴”的時(shí)候很很慢很慢超級(jí)慢，所以就用這個(gè)cnpm來安裝我們說需要的“依賴”绣张。安裝完成之后輸入 cnpm -v答渔，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)侥涵，則說明安裝成功沼撕。
方法一：
使用阿里定制的cnpm命令行工具代替默認(rèn)的npm，輸入以下代碼
npm install -g cnpm --registry=http://registry.npmmirror.com
檢查是否安裝成功：
$ cnpm -v
安裝成功之后芜飘，以后安裝依賴包的方式和npm的是一樣的务豺，只是npm的命令換成是cnpm就可以了。
==================
安裝webpack嗦明，打開命令行工具輸入：npm install webpack -g笼沥，安裝完成之后輸入 webpack -v，如下圖娶牌，如果出現(xiàn)相應(yīng)的版本號(hào)奔浅，則說明安裝成功。
安裝vue-cli腳手架構(gòu)建工具裙戏，打開命令行工具輸入：npm install vue-cli -g乘凸，安裝完成之后輸入? vue -V（注意這里是大寫的“V”），如下圖累榜，如果出現(xiàn)相應(yīng)的版本號(hào)营勤，則說明安裝成功灵嫌。
二、通過以上四步葛作，我們需要準(zhǔn)備的環(huán)境和工具都準(zhǔn)備好了寿羞，接下來就開始使用vue-cli來構(gòu)建項(xiàng)目
在硬盤上找一個(gè)文件夾放工程用的。這里有兩種方式指定到相關(guān)目錄：①cd 目錄路徑? ②如果以安裝git的赂蠢，在相關(guān)目錄右鍵選擇Git Bash Here
安裝vue腳手架輸入：vue init webpack exprice 绪穆，注意這里的“exprice” 是項(xiàng)目的名稱可以說是隨便的起名，但是需要主要的是“不能用中文”虱岂。
$ vue init webpack exprice? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---------------------? 這個(gè)是那個(gè)安裝vue腳手架的命令
This will install Vue 2.x version of the template.? ? ---------------------這里說明將要?jiǎng)?chuàng)建一個(gè)vue 2.x版本的項(xiàng)目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice)? ? ---------------------項(xiàng)目名稱
? Project name exprice
? Project description (A Vue.js project)? ---------------------項(xiàng)目描述
? Project description A Vue.js project
? Author Datura? --------------------- 項(xiàng)目創(chuàng)建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)? --------------------- 是否安裝Vue路由玖院，也就是以后是spa（但頁面應(yīng)用需要的模塊）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測(cè)規(guī)則，這里個(gè)人建議選no
? 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
如下圖：
cd 命令進(jìn)入創(chuàng)建的工程目錄第岖，首先cd exprice（這里是自己建工程的名字）难菌；
安裝項(xiàng)目依賴：npm install，因?yàn)樽詣?dòng)構(gòu)建過程中已存在package.json文件蔑滓，所以這里直接安裝依賴就行郊酒。不要從國內(nèi)鏡像cnpm安裝(會(huì)導(dǎo)致后面缺了很多依賴庫)，但是但是如果真的安裝“個(gè)把”小時(shí)也沒成功那就用：cnpm install 吧
安裝 vue 路由模塊 vue-router 和網(wǎng)絡(luò)請(qǐng)求模塊 vue-resource键袱，輸入：cnpm install vue-router vue-resource --save燎窘。
創(chuàng)建完成的“exprice”目錄如下：
下面我簡單的說明下各個(gè)目錄都是干嘛的：
啟動(dòng)項(xiàng)目，輸入：npm run dev比藻。服務(wù)啟動(dòng)成功后瀏覽器會(huì)默認(rèn)打開一個(gè)“歡迎頁面”铝量，如下圖：
注意：這里是默認(rèn)服務(wù)啟動(dòng)的是本地的8080端口，所以請(qǐng)確保你的8080端口不被別的程序所占用银亲。
至此簡單的一個(gè)項(xiàng)目構(gòu)建完畢....后面我將繼續(xù)利用這個(gè)構(gòu)建的項(xiàng)目寫一個(gè)簡單的單頁面應(yīng)用慢叨。
