為什么要用Vue腳手架：
用VUE開發(fā)管呵，當(dāng)然不能只滿足于小打小鬧地引用個(gè)文件而已槐脏，我們必須先搭建項(xiàng)目運(yùn)行環(huán)鏡，其好處有如下幾點(diǎn)：
一撇寞、B格滿滿顿天，再也不用為IIS、LNMP蔑担、ANMP各種配置發(fā)愁了牌废，npm run dev熱啟動(dòng)，簡直是調(diào)試神器啤握！
二鸟缕、再也不用到處找各種支持庫或環(huán)境包，缺啥東東排抬，就用npm安裝啥懂从，在我眼中，npm的那一端簡直是一座銀行蹲蒲，要啥有啥番甩，還是無限存款，不擔(dān)心出錯(cuò)届搁。
三缘薛、webpack打包，簡單省事卡睦！
為什么有這個(gè)筆記：
其實(shí)網(wǎng)上有N多這種教程宴胧，有繁有簡，不一而足表锻，安裝過程中踩到的雷各有不同恕齐。我現(xiàn)在把自己遇到的雷總結(jié)一遍，以備以后查詢瞬逊。
安裝順序總結(jié)：
我的環(huán)境是Windows10 64位显歧，時(shí)間是2018-8-9日补胚，以后遇到新版本，會(huì)在這里更新：
安裝NODE -> 安裝CNPM?->?安裝webpack?->?初始化項(xiàng)目?-> 安裝依賴?-> 【安裝IVEW】
安裝細(xì)節(jié)
一追迟、安裝NODE.JS （NODE環(huán)境）
????????官網(wǎng)：https://nodejs.org/en/? ? 下載
????????下載：LTS 長期支持版；Current 最新版 （最好使用這個(gè)）
????????安裝：不要安裝在系統(tǒng)盤骚腥，目錄結(jié)構(gòu)不要太復(fù)雜敦间，不要中文，好記就行
????? ? ? ? ? ? ? ? 安裝過程一路下一步束铭，沒什么可說的廓块！省略...
配置：（很重要，不配置不能在任意目錄中使用命令）
????????????1契沫、在安裝目錄中带猴，新建文件夾（全局模塊存放目錄）node_cache 和（cache目錄）node_global
???????????????? 改變npm配置 運(yùn)行如下命令：
????npm config set prefix "D:\Program Files\nodejs\node_global"
????npm config set cache "D:\Program Files\nodejs\node_cache"
? ? ? ? ? ? ? ? 意為將npm全局模塊存放目錄變成 XXX
????????????2、添加環(huán)境變量（模塊安裝目錄）：（計(jì)算機(jī)屬性-高級(jí)-環(huán)境變量 路徑-編輯-填寫）
????????????????????D:\workspace\nodejs\node_modules
????????測(cè)試：命令行：npm -v
????????（因設(shè)了環(huán)境變量懈万，該命令可以在任何位置運(yùn)行拴清，否則說明設(shè)錯(cuò)了）
二、安裝淘寶cnpm?
? ? ? ? 為什么要用cnpm会通？cnpm同npm一樣口予，都是包安裝工具，區(qū)別是cnpm國內(nèi)的涕侈，下載東西速度更快沪停；npm是國外的，速度慢一些裳涛。
????????官網(wǎng)：https://npm.taobao.org/? ? ? ? 用的是淘寶的木张，暫時(shí)不擔(dān)心它會(huì)倒閉。(lll￢ω￢)
????????安裝：
????npm install -g cnpm ---registry=https://registry.npm.taobao.org
????????說明：一端三、安裝NODE.JS時(shí)舷礼，會(huì)自動(dòng)安裝npm，上面修改環(huán)境變量郊闯，就是為了讓你知道npm將東西安裝在了什么地方且轨；二、npm命令可以直接用windows自帶的CMD運(yùn)行虚婿。
????????配置：添加環(huán)境變量：D:\workspace\nodejs\node_global（方法同上旋奢，意義同上）
????????測(cè)試：
????cnpm -v
三、安裝webpack （前端資源加載/打包工具）
????????安裝：
????cnpm install webpack -g
????（這個(gè)命令可以隨處運(yùn)行然痊，就是因?yàn)樵O(shè)了cnpm的環(huán)境變量至朗，可以環(huán)境變量多么重要）
????????測(cè)試：
????webpack -v
四剧浸、安裝vue-cli（今天的主角锹引，不了解它的也不會(huì)看這個(gè)筆記了）
????????安裝：
????cnpm install vue-cli -g
????????測(cè)試：
????vue -V?
（V要大寫矗钟，返回VUE版本號(hào)，否則安裝失斚颖洹）
五吨艇、初始化項(xiàng)目 （搭建腳手架）
????????項(xiàng)目即你所做的網(wǎng)站或應(yīng)用或APP的工作目錄總和，配置它有利于集合所有文件資源腾啥，依賴類东涡、環(huán)境等，不必再另外配置（其實(shí)配置它自身也挺麻煩）
????????創(chuàng)建：創(chuàng)建項(xiàng)目存放文件夾倘待，在其中運(yùn)行命令行（文件夾名不能大寫或中文）
????????????vue init webpack 項(xiàng)目名（最好是文件夾名）
????????過程及詢問：（安裝過程中疮跑，會(huì)有一些互動(dòng)選項(xiàng)）
????????????Project name: 項(xiàng)目名稱，默認(rèn)是項(xiàng)目存放目錄名（可以直接回國）
????????????Project description： 項(xiàng)目描述凸舵，（自已寫）
????????????Author: 項(xiàng)目創(chuàng)建者
????????????Vue build (Use arrow keys) 打包方式 （選第一項(xiàng)或默認(rèn)即可）
????????????Install vue-router? 是否安裝路由（是）
????????????Use ESLint to lint your code? 是否啟用eslint檢測(cè)（不）
????????????Setup unit tests with Karma + Mocha? 是否安裝單元測(cè)試（是 選Karma + Mocha）
????????????Setup e2e teste with nightwatch? 是否安裝e2e測(cè)試（是）
????????????Should we run `npm install` for you after the project has been created?
? ? ? ? ?? 重要：這一項(xiàng)是詢問 是否用npm安裝配置所有依賴
??????????? 最好選（否）手動(dòng)祖娘，等安裝完成后自己用cnpm安裝
????????依賴：在項(xiàng)目文件夾中運(yùn)行（確保項(xiàng)目目錄中有package.json）
????????????????先安裝babel-runtime：（用來模擬ES2015環(huán)境的工具）
????????cnpm? install babel-loader --save
????????????????安裝依賴環(huán)境：
????cnpm install
????????????????出錯(cuò)沒關(guān)系，大不了重裝：
六啊奄、啟動(dòng)項(xiàng)目 -熱啟動(dòng)渐苏，會(huì)臨時(shí)運(yùn)行一個(gè)服務(wù)，可隨時(shí)監(jiān)控代碼效果及錯(cuò)誤
????cnpm run dev
七菇夸、安裝前端UI框架 IVEW（為什么要選它整以？你總得用一個(gè)吧，要不自己寫峻仇？各種組件和效果公黑？）
????cnpm install iview --save
