Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。它既集眾多優(yōu)秀前端框架之大成跪腹，又保持了其簡單易用的特點(diǎn)褂删。對(duì)vue.js感興趣并且已經(jīng)通讀官方基礎(chǔ)教程的初學(xué)者來說，開始一個(gè)實(shí)戰(zhàn)項(xiàng)目是進(jìn)一步深入學(xué)習(xí)vue.js最好的方式了冲茸。在此之前屯阀，需要學(xué)會(huì)如何搭建開發(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即可得到對(duì)應(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)建一個(gè)基于 webpack 模板的新項(xiàng)目,即在cmd中輸入以下命令：
vue init webpack my-vue-project
vue init webpack my-vue-project意思是初始化一個(gè)項(xiàng)目框产，利用的是webpack打包和壓縮凄杯，此項(xiàng)目命名為my-vue-project。這樣秉宿，my-vue-project文件夾就自動(dòng)生成剛剛在指定的目錄中戒突，在此過程中，需要輸入項(xiàng)目名描睦、描述膊存、作者等。
打開my-vue-project文件夾忱叭，項(xiàng)目文件如下：
安裝項(xiàng)目依賴
在cmd中隔崎，注意需要使用命令先定位到my-vue-project目錄下，然后輸入命令cnpm install安裝項(xiàng)目所需的依賴包資源
cnpm install
可以看到my-vue-project文件夾下多了一個(gè)node_modules文件
運(yùn)行項(xiàng)目
使用命令npm run dev 運(yùn)行項(xiàng)目
npm run dev
項(xiàng)目運(yùn)行成功后瀏覽器會(huì)自動(dòng)打開localhost:8080呈現(xiàn)以下頁面：
至此韵丑，vue的腳手架工具已經(jīng)搭建完成爵卒，接下來具體項(xiàng)目的開發(fā)只需在src目錄下進(jìn)行。
【Thanks ?for watching】
