一、安裝環境
NodeJS、NPM安裝配置步驟(windows版本)
1、windows下的NodeJS安裝是比較友善的（v0.6.0版本之後，支援windows native），隻需要登陸官網（http://nodejs.org/ ） 便可以看到首頁的“INSTALL”按鈕，直接點選就會自動下載下傳安裝了。
2、安裝過程基本直接“NEXT”就可以了。（windows的安裝msi檔案在過程中會直接添加path的系統變量，變量值是你的安裝路徑，例如“C:\Program Files\nodejs”）。選擇帶manage的安裝
3、安裝完成後可以使用cmd（win+r然後輸入cmd進入）測試下是否安裝成功。方法：在cmd下輸入node -v，出現下圖版本提示就是完成了NodeJS的安裝。
4、npm的安裝。由于新版的NodeJS已經內建了npm，是以之前npm也一并安裝好了。同樣可以使用cmd指令行輸入"npm -v"來測試是否成功安裝。如下圖，出現版本提示便OK了。
5、正常NodeJS的搭建到現在為止已經完成了，急不及待的話你可以在”cmd“輸入”node“進入node開發模式下，輸入你的NodeJS第一句：”hello world“ - 輸入：console.log(‘hello world’)。
6、npm作為一個NodeJS的子產品管理，之前我由于沒有系統地看資料是以導緻安裝配置子產品的時候走了一大段彎路，是以現在很有必要列出來記錄下。
①、我們要先配置npm的全局子產品的存放路徑以及cache的路徑，例如我希望将以上兩個檔案夾放在NodeJS的主目錄下，便在NodeJs下建立 “node_global” 及 “node_cache” 兩個檔案夾。如下圖
②、啟動cmd，輸入 npm config set prefix "C:\Program Files\nodejs\node_global"
以及 npm config set cache "C:\Program Files\nodejs\node_cache"
C:\Program Files\nodejs 替換為你的Nodejs路徑
③、現在我們來裝個子產品試試，選擇express這個比較常用的子產品。同樣在cmd指令行裡面，輸入“npm install express -g”（“-g”這個參數意思是裝到global目錄下，也就是上面說設定的“C:\Program Files\nodejs\node_global”裡面。）。待cmd裡面的安裝過程滾動完成後，會提示“express”裝在了哪、版本還有它的目錄結構是怎樣。如下圖
④、關閉cmd，打開系統對話框，“我的電腦”右鍵“屬性”-“進階系統設定”-“進階”-“環境變量”。如下圖
⑤、進入環境變量對話框，在系統變量下建立"NODE_PATH"，輸入”C:\Program Files\nodejs\node_global\node_modules“。（ps：這一步相當關鍵。）
2014.4.19新增：由于改變了module的預設位址，是以上面的使用者變量都要跟着改變一下（使用者變量"PATH"修改為“C:\Program Files\nodejs\node_global\”），要不使用module的時候會導緻輸入指令出現“xxx不是内部或外部指令，也不是可運作的程式或批處理檔案”這個錯誤。
(C:\Program Files\nodejs 替換為你的Nodejs路徑)
(C:\Program Files\nodejs 替換為你的Nodejs路徑)
⑥、以上步驟都OK的話，我們可以再次開啟cmd指令行，進入node(打開cmd之後 輸入：node 即可進入node)，輸入“require(‘express’)”來測試下node的子產品全局路徑是否配置正确了。正确的話cmd會列出express的相關資訊。如下圖（如出錯一般都是NODE_PATH的配置不對，可以檢查下第④⑤步）
安裝完以上之後即可配置vue運作環境
二、cnpm的安裝
安裝完node之後，npm包含的很多依賴包是部署在國外的，在天朝，大家都知道下載下傳速度是超級慢啊。是以我們要安裝cnpm，cnpm是淘寶對npm的鏡像伺服器，這樣依賴的包安裝起來就快多了。
安裝指令為：npm install -g cnpm --registry=https://registry.npm.taobao.org
三、vue-cli的安裝
vue-cli是vue官方提供的一個指令行工具，可用于快速搭建大型單頁應用。該工具提供開箱即用的建構工具配置，帶來現代化的前端開發流程。隻需一分鐘即可啟動帶熱重載、儲存時靜态檢查以及可用于生産環境的建構配置的項目。
安裝指令為：cnpm install -g vue-cli，回車，等待安裝。
安裝完後，檢查是否安裝成功，輸入vue，出現以下提示表示安裝成功。
四、試試建立一個Vue項目
（1）建立一個項目檔案夾，命名為 vue-demo，cd到此檔案夾，輸入:vue init webpack vue-demo，回車，按照如下操作進行初始化：
我們暫時不适用模闆提供的測試架構，Karma + Mocha，以及Nightwatch。
（2）項目目錄
（3）安裝項目依賴的包
cd到vue-demo 檔案夾，執行cnpm install，安裝依賴包，安裝完成之後，項目目錄下多了node_modules：
（4）運作項目
在指令行裡輸入 cnpm run dev(進入項目所在的目錄)，執行完成後啟動項目，浏覽器出現以下接結果，說明啟動成功。注意浏覽器的版本，低版本的不支援哦。
二、使用Gulp打包(window系統)
1、使用 cmd 切換到項目目錄
2、輸入 npm init 初始化一個項目
3、接着輸入 npm --global install gulp 安裝全局gulp
npm install gulp
4、輸入 npm install --save-dev gulp 安裝依賴項
npm install --save-dev gulp
5、安裝打包項目需要的庫
npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev
後面會解釋這些庫的作用
6、把需要打包的檔案放在一個檔案夾裡 複制到目前目錄
這裡我需要打包的檔案都放到了 src 檔案夾裡
7、在根目錄下建立一個 gulpfile.js 檔案
var gulp = require('gulp');
// 根據哈希碼設定版本号 (避免了人工設定版本号的繁瑣)
var rev = require('gulp-rev');
// 把更改了的檔案名 更新到*.html的引用 (不用手動去更改)
var revReplace = require('gulp-rev-replace');
// 把 js或css 檔案 用特定的文法合并在一起
var useref = require('gulp-useref');
// 過濾指定檔案
var filter = require('gulp-filter');
// 壓縮js代碼
var uglify = require('gulp-uglify');
// 壓縮css代碼
var csso = require('gulp-csso');
gulp.task('default', function() {
var jsFilter = filter('**/*.js', {restore: true});
var cssFilter = filter('**/*.css', {restore: true});
var indexHtmlFilter = filter(['**/*', '!**/index.html'], {restore: true});
return gulp.src('首頁的位置 例如：src/index.html')
.pipe(useref())
.pipe(jsFilter)
.pipe(uglify())
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso())
.pipe(cssFilter.restore)
.pipe(indexHtmlFilter)
.pipe(rev)
.pipe(indexHtmlFilter.restore)
.pipe(revReplace)
.pipe(gulp.dest('dist'));
});
8、在 cmd 裡 輸入 gulp 就會自動打包了
打包的項目 會放到 dist 檔案夾 沒什麼特殊需求的話 這段代碼适用于很多的代碼打包項目
安裝教程轉自 web前端小計