vue.js2.0實戰(1):搭建開發環境及構建項目

Vue.js是一套構建用戶界面的漸進式框架。它既集衆多優秀前端框架之大成，又保持了其簡單易用的特色。對vue.js感興趣而且已經通讀官方基礎教程的初學者來講，開始一個實戰項目是進一步深刻學習vue.js最好的方式了。在此以前，須要學會如何搭建開發環境。

開發環境的搭建

安裝node.js

Node.js官網：https://nodejs.org/en/

進入Node.js官網，選擇下載並安裝Node.js。安裝過程只須要點擊「下一步」便可，以下圖，很是簡單。

驗證Node.js是否安裝好，在windows下，win+r召喚出運行窗口，輸入cmd打開命令行窗口。輸入node -v便可獲得對應的Node.js版本。

npm包管理器是集成在Node.js中了，因此在安裝Node.js的時候就已經自帶了npm。
輸入npm -v可獲得npm的版本。

注意npm的版本須要在3.0.0以上版本，因此，若是npm的版本小於3.0.0,輸入如下命令更新npm至最新版本。

npm -g install npm

安裝cnpm

因爲資源的限制，安裝npm依賴包的時候常常失敗，建議使用npm的國內鏡像cnpm 命令行工具代替默認的npm。

npm 國內鏡像 https://npm.taobao.org/

在命令行中輸入如下內容等待安裝

npm install -g cnpm --registry=https://registry.npm.taobao.org

cpnm全局安裝vue-cli

在命令行中運行如下命令而後等待安裝

cnpm install -g vue-cli

構建項目

新建項目

在這裏我將vue項目建在f盤的vueProjiects文件夾下，利用命令進入此目錄。在cmd中輸入盤符f:回車便可進入F盤：

輸入命令 cd vueProjects跳到此目錄下：

在此目錄下建立一個基於 webpack 模板的新項目,即在cmd中輸入如下命令：

vue init webpack my-vue-project

vue init webpack my-vue-project意思是初始化一個項目，利用的是webpack打包和壓縮，此項目命名爲my-vue-project。這樣，my-vue-project文件夾就自動生成剛剛在指定的目錄中，在此過程當中，須要輸入項目名、描述、做者等。

打開my-vue-project文件夾，項目文件以下：

安裝項目依賴

在cmd中，注意須要使用命令先定位到my-vue-project目錄下，而後輸入命令cnpm install安裝項目所需的依賴包資源

cnpm install

能夠看到my-vue-project文件夾下多了一個node_modules文件

運行項目

使用命令npm run dev 運行項目

npm run dev

項目運行成功後瀏覽器會自動打開localhost:8080呈現如下頁面：

至此，vue的腳手架工具已經搭建完成，接下來具體項目的開發只需在src目錄下進行。