Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。它既集眾多優(yōu)秀前端框架之大成占业，又保持了其簡單易用的特點(diǎn)。對vue.js感興趣并且已經(jīng)通讀官方基礎(chǔ)教程的初學(xué)者來說，開始一個實(shí)戰(zhàn)項(xiàng)目是進(jìn)一步深入學(xué)習(xí)vue.js最好的方式了撇贺。在此之前，需要學(xué)會如何搭建開發(fā)環(huán)境冰抢。
開發(fā)環(huán)境的搭建
安裝node.js
Node.js官網(wǎng)：https://nodejs.org/en/
進(jìn)入Node.js官網(wǎng)松嘶，選擇下載并安裝Node.js。安裝過程只需要點(diǎn)擊“下一步”即可挎扰，如下圖翠订，非常簡單。
驗(yàn)證Node.js是否安裝好遵倦，在windows下尽超，win+r召喚出運(yùn)行窗口，輸入cmd打開命令行窗口梧躺。輸入node -v即可得到對應(yīng)的Node.js版本似谁。
npm包管理器是集成在Node.js中了，所以在安裝Node.js的時(shí)候就已經(jīng)自帶了npm。
輸入npm -v可得到npm的版本巩踏。
注意npm的版本需要在3.0.0以上版本秃诵，所以，如果npm的版本小于3.0.0,輸入以下命令更新npm至最新版本塞琼。
npm -g install npm
安裝cnpm
由于資源的限制菠净，安裝npm依賴包的時(shí)候經(jīng)常失敗，建議使用npm的國內(nèi)鏡像cnpm 命令行工具代替默認(rèn)的npm屈梁。
npm 國內(nèi)鏡像 https://npm.taobao.org/
在命令行中輸入以下內(nèi)容等待安裝
npm install -g cnpm --registry=https://registry.npm.taobao.org
cpnm全局安裝vue-cli
在命令行中運(yùn)行以下命令然后等待安裝
cnpm install -g vue-cli
構(gòu)建項(xiàng)目
新建項(xiàng)目
在這里我將vue項(xiàng)目建在f盤的vueProjiects文件夾下嗤练，利用命令進(jìn)入此目錄。在cmd中輸入盤符f:回車即可進(jìn)入F盤：
輸入命令 cd vueProjects跳到此目錄下：
在此目錄下創(chuàng)建一個基于 webpack 模板的新項(xiàng)目,即在cmd中輸入以下命令：
vue init webpack my-vue-project
vue init webpack my-vue-project意思是初始化一個項(xiàng)目在讶，利用的是webpack打包和壓縮煞抬，此項(xiàng)目命名為my-vue-project。這樣构哺，my-vue-project文件夾就自動生成剛剛在指定的目錄中革答，在此過程中，需要輸入項(xiàng)目名曙强、描述残拐、作者等。
打開my-vue-project文件夾碟嘴，項(xiàng)目文件如下：
安裝項(xiàng)目依賴
在cmd中溪食，注意需要使用命令先定位到my-vue-project目錄下，然后輸入命令cnpm install安裝項(xiàng)目所需的依賴包資源：
cnpm install
可以看到my-vue-project文件夾下多了一個node_modules文件
運(yùn)行項(xiàng)目
使用命令npm run dev 運(yùn)行項(xiàng)目
npm run dev
項(xiàng)目運(yùn)行成功后瀏覽器會自動打開localhost:8080呈現(xiàn)以下頁面：
至此娜扇，vue的腳手架工具已經(jīng)搭建完成错沃，接下來具體項(xiàng)目的開發(fā)只需在src目錄下進(jìn)行。
