一、簡介
Vue.js 是什么
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。
Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue.js是一個(gè)MVVM模式的框架。
vue.js的特點(diǎn):
易用： 已經(jīng)會了HTML,CSS,JavaScript？即刻閱讀指南即可開始構(gòu)建應(yīng)用！
靈活： 簡單小巧的核心，漸進(jìn)式技術(shù)棧，足以應(yīng)付任何規(guī)模的應(yīng)用。
高效： 16kb min+gzip 的運(yùn)行大小,超快虛擬 DOM ,最省心的優(yōu)化。
二、環(huán)境搭建
Node.js: javascript運(yùn)行環(huán)境(runtime),不同系統(tǒng)直接運(yùn)行各種編程語言
npm: Nodejs下的包管理器。由于國內(nèi)使用npm會很慢,這里推薦使用淘寶NPM鏡像（http://npm.taobao.org/）
$ npm install-g cnpm--registry=https://registry.npm.taobao.org
webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。
vue-cli: 用戶生成Vue工程模板
三、安裝node.js
1.從node.js官網(wǎng)下載并安裝node，安裝過程很簡單，一路“下一步”就可以了（傻瓜式安裝），注意安裝的地址。
安裝完成之后，打開命令行工具，輸入?node -v，如果出現(xiàn)相應(yīng)的版本號，則說明安裝成功。
2.npm包管理器，是集成在node中的，所以，直接輸入?npm -v?就會顯示出npm的版本信息。
總：cmd下（win+R進(jìn)入命令行模式）輸入：
? ? ? ? node -v? ? //驗(yàn)證node.js 是否安裝成功，顯示出相應(yīng)的版本信息
? ? ? ? npm -v? ? ?//驗(yàn)證npm包管理器是否安裝成功，顯示出相應(yīng)的版本信息
3.OK！node環(huán)境已經(jīng)安裝完成，npm包管理器也有了。由于有些npm有些資源被屏蔽或者是國外資源的原因，經(jīng)常會導(dǎo)致用npm安裝依賴包的時(shí)候失敗，所有我還需要npm的國內(nèi)鏡像---cnpm。(如果想進(jìn)一步了解cnpm的，查看淘寶npm鏡像官網(wǎng))
安裝cnpm
在命令行中輸入?npm install -g cnpm --registry=http://registry.npm.taobao.org?然后等待安裝完成。
完成之后，我們就可以用cnpm代替npm來安裝依賴包了。
安裝vue-cli腳手架構(gòu)建工具
在命令行中運(yùn)行命令?npm install -g vue-cli?，然后等待安裝完成。
通過以上三部，我們需要準(zhǔn)備的環(huán)境和工具都準(zhǔn)備好了，接下來就開始使用vue-cli來構(gòu)建項(xiàng)目。
構(gòu)建項(xiàng)目：
首先我們要選擇存放項(xiàng)目的位置，然后再用命令行將目錄轉(zhuǎn)到選定的目錄，在這里，我選擇在c盤下創(chuàng)建新的目錄（firstVue 目錄），用cd 將目錄切到該目錄下，cd firstVue?,在NodeTest 目錄下，在命令行中運(yùn)行命令?vue init webpack firstApp?。解釋一下這個(gè)命令，這個(gè)命令的意思是初始化一個(gè)項(xiàng)目，其中webpack是構(gòu)建工具，也就是整個(gè)項(xiàng)目是基于webpack的。其中firstApp是整個(gè)項(xiàng)目文件夾的名稱，這個(gè)文件夾會自動生成在你指定的目錄中（我的實(shí)例中，會在firstVue 目錄生成該文件夾），如下圖。
總：在cmd中，cd? ?firstVue? ? ? //進(jìn)入指定目錄firstVue
? ? ? ? ? ? ? ? ? vue? ?init? ?webpack? ?firstApp? ? ?//初始化一個(gè)項(xiàng)目
解釋一下初始項(xiàng)目是的一些配置選項(xiàng)（可以一直按回車去填寫就好了）：
'git' ????????????????????????е????
?????????
? Project name sell? 項(xiàng)目的名字
? Project description sell app? 項(xiàng)目描述
? Author lhb? 作者
? Vue build standalone?
? Install vue-router? Yes? //是否安裝路由
? Use ESLint to lint your code? Yes? //es6的代碼風(fēng)格檢查器
? Pick an ESLint preset Standard? //es6的模板使用標(biāo)準(zhǔn)就可以
? Setup unit tests with Karma + Mocha? Yes? //單元測試
? Setup e2e tests with Nightwatch? Yes? //e2e或者端到端（end-to-end）或者UI測試是一種測試方法，它用來測試一個(gè)應(yīng)用從頭到尾的流程是否和設(shè)計(jì)時(shí)候所想的一樣。簡而言之，它從一個(gè)用戶的角度出發(fā)，認(rèn)為整個(gè)系統(tǒng)都是一個(gè)黑箱，只有UI會暴露給用戶。
接下來，我們?nèi)oteTest目錄下去看是否已創(chuàng)建文件，?打開firstApp 項(xiàng)目，項(xiàng)目中的目錄如下：
介紹一下各個(gè)目錄及其作用：
build //webpack 配置相關(guān)文件夾
config //webpack 配置相關(guān)文件夾
node_modules //cnpm install 安裝的依賴代碼庫文件夾
src? //存放源碼的文件夾，這里是我們開發(fā)的主要目錄，基本上要做的事情都在這個(gè)目錄里面，里面包含了幾個(gè)目錄及文件：
? ??????????assets:放置一些圖片，如logo等
? ? ? ? ? ? ?components:目錄里放的是一個(gè)組件文件，可以不用。
? ? ? ? ? ? ?App.vue：項(xiàng)目入口文件，我們也可以將組件寫這里，而不使用components目錄。
? ? ? ? ? ? main.js ：項(xiàng)目的核心文件
static //第三方資源文件夾，靜態(tài)資源目錄，如圖片、字體等
test //初始測試目錄，可刪除
.babelrc //第三方babel轉(zhuǎn)化（比如es2016轉(zhuǎn)es2015）配置文件
.editorconfig //編輯器配置文件
.eslintignore? //忽略語法檢查的目錄文件
.eslintrc? // .eslintrc 的配置文件
.gitignore? //git忽略的配置文件
index.html //入口文件，可以添加一些meta信息或者同統(tǒng)計(jì)代碼啥的
package.json? //配置文件
README.md //項(xiàng)目描述文件
?這就是整個(gè)項(xiàng)目的目錄結(jié)構(gòu)，其中，我們主要在src目錄中做修改。這個(gè)項(xiàng)目現(xiàn)在還只是一個(gè)結(jié)構(gòu)框架，整個(gè)項(xiàng)目需要的依賴資源都還沒有安裝。
?安裝項(xiàng)目所需要的依賴：執(zhí)行 cnpm install ? (這里可以用cnpm代替npm了)
?安裝完依賴包資源后，我們就可以運(yùn)行整個(gè)項(xiàng)目了。
四、運(yùn)行項(xiàng)目
在項(xiàng)目目錄中，運(yùn)行命令?npm run dev?，（注意是否為項(xiàng)目目錄，若不是用cd命令進(jìn)入目錄下），運(yùn)行后如下：
項(xiàng)目啟動后，在瀏覽器中輸入項(xiàng)目啟動后的地址：http://localhost:8080,在瀏覽器中會出現(xiàn)vue的logo.
至此，vue的npm安裝方式已介紹完畢。
