【vue.js】windows下安裝vue.js

windows下搭建vue開發環境

Vue.js是一套構建用戶界面的 “漸進式框架”。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。2016年，Vue同Angular、React形成三足鼎立的局面，讓前端的開發者顧不暇接，今天我們就來了解一下Vue的環境搭建。

一、node.js安裝
Vue項目通常通過webpack工具來構建，而webpack命令的執行是依賴node.js的環境的，所以首先要安裝node.js。node.js的官方地址為：https://nodejs.org/en/download/，下載相應版本。

安裝完畢之后，在命令行下驗證是否安裝成功：輸入nmp，顯示如下就表示安裝成功。

二、cnpm的安裝
安裝完node之后，npm包含的很多依賴包是部署在國外的，在天朝，大家都知道下載速度是超級慢啊。所以我們要安裝cnpm，cnpm是淘寶對npm的鏡像服務器，這樣依賴的包安裝起來就快多了。
安裝命令為：npm install -g cnpm --registry=https://registry.npm.taobao.org   

（如果上述方式提示版本過低，可以執行這個命令：npm --registry https://registry.npm.taobao.org info underscore ）

三、vue-cli的安裝
vue-cli是vue官方提供的一個命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鍾即可啟動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。
安裝命令為：cnpm install -g vue-cli，回車，等待安裝。

安裝完后，檢查是否安裝成功，輸入vue，出現以下提示表示安裝成功。

四、試試新建一個Vue項目
（1）新建一個項目文件夾，命名為 vue-demo，cd到此文件夾如D:\vue-demo，輸入:vue init webpack vue-demo，回車，按照如下操作進行初始化：

我們暫時不適用模板提供的測試框架，Karma + Mocha，以及Nightwatch。
（2）項目目錄

（3）安裝項目依賴的包
cd到vue-demo 文件夾，執行cnmp install，安裝依賴包，安裝完成之后，項目目錄下多了node_modules：

（4）運行項目
在剛才目錄，命令行里輸入 cnpm run dev，執行完成后啟動項目，（系統告知你ip和端口）瀏覽器出現以下接結果，說明啟動成功。注意瀏覽器的版本，低版本的不支持哦。