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

npm全局安裝vue-cli

在命令行中運(yùn)行以下命令然后等待安裝

npm 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目錄下，然后輸入命令npm install安裝項(xiàng)目所需的依賴包資源

npm 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)行。