vue.js入門指南與安裝（詳細(xì)步驟圖）

一、Vue.js 是什么

官方解釋：Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。

Vue.js 可以說是MVVM 架構(gòu)的最佳實(shí)踐，是一個JavaScriptMVVM庫，是一套構(gòu)建用戶界面的漸進(jìn)式框架。專注于 MVVM 中的 ViewModel，不僅做到了數(shù)據(jù)雙向綁定，而且也是一款相對比較輕量級的JS 庫，易學(xué)易上手。

什么是漸進(jìn)式框架

漸進(jìn)式代表的含義是：主張最少。每個框架都有不同的特點(diǎn)，那么這些特點(diǎn)對于某些開發(fā)需求有一定的要求，那么這些要求就可以稱為主張，主張的強(qiáng)弱直接回影響該框架在項目的使用方式.

漸進(jìn)式框架的具體使用就是階梯式的向前，“Progressive(漸進(jìn)式的)”這個詞在英文中定義是漸進(jìn)，一步一步，什么時候需要使用就什么加載對應(yīng)的內(nèi)容，由簡單到復(fù)雜的方式去實(shí)現(xiàn)整個項目的需求，比如項目需求確定后，可以根據(jù)不同的需求去加載不同的模塊，用最小，最快的方式實(shí)現(xiàn)項目的開發(fā)。同時利用相對較完善的生態(tài)圈進(jìn)行后期版本的迭代升級。

二、Vue.js的優(yōu)點(diǎn)

1. 簡單易用

(1) 只要掌握HTML+CSS+JavaScript就可以快速上手

2. 靈活漸進(jìn)式

(1) 根據(jù)需求的不同加載不同的模塊即可

3. 輕量、高效

(1) 壓縮后只有20KB左右

(2) 利用虛擬DOM。什么是虛擬DOM，虛擬DOM其實(shí)就是用一個原生的JS對象去描述一個DOM節(jié)點(diǎn)，實(shí)際上它只是對真實(shí) DOM 的一層抽象。最終可以通過一系列操作使這棵樹映射到真實(shí)環(huán)境上。相當(dāng)于在js與DOM之間做了一個緩存，利用diff算法對比新舊虛擬DOM記錄到一個對象中按需更新， 最后創(chuàng)建真實(shí)的DOM

4. 雙向數(shù)據(jù)綁定

(1) 對應(yīng)表單元素可以實(shí)現(xiàn)雙向綁定，視圖可以影響模型，同時模型又可以控制視圖的展示

5. 生態(tài)豐富，學(xué)習(xí)成本低

(1) 目前已擁有完善的UI框架支持，配套的UI組件，可以快速實(shí)現(xiàn)項目的開發(fā).

三、Vue.js 對比 Angular.js 、 React.js

1.Vue特點(diǎn):

Vue 的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動。

2.Vue.js與Angular.js對比:

相同點(diǎn)：

1.都支持指令:基礎(chǔ)指令以及自定義指令

2.都支持過濾器:內(nèi)置過濾器和自定義過濾器

3.都支持雙向數(shù)據(jù)綁定

4.都不支持低端瀏覽器,IE8以及以下均不支持

不同點(diǎn)：

1.學(xué)習(xí)成本

AngularJS的學(xué)習(xí)成本高，比如增加了Dependency Injection特性，而 Vue.js本身提供的API都比較簡單、直觀。

2. 更靈活

比起 Angular更少專制，它能讓你按照自己想要的方式構(gòu)建應(yīng)用

3.性能方面

AngularJS依賴對數(shù)據(jù)做臟檢查，當(dāng) watcher 越來越多時會變得越來越慢，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計算。并且，如果一些 watcher 觸發(fā)另一個更新，臟檢查循環(huán)(digest cycle)可能要運(yùn)行多次。Vue依賴追蹤的觀察系統(tǒng)并且異步列隊更新，所有的數(shù)據(jù)變化都是獨(dú)立地觸發(fā)，除非它們之間有明確的依賴關(guān)系。

3.Vue.js與React.js的對比

相同點(diǎn)：

1. 都是組件化開發(fā)

2. 都提供了合理的鉤子函數(shù)

不同點(diǎn)：

1.性能方面

Vue性能上更有優(yōu)勢，因?yàn)?Vue 的虛擬DOM 實(shí)現(xiàn)相對更為輕量一些，整體大小比react.js更小更輕便

2.學(xué)習(xí)成本方面

Vue更容易上手，根據(jù)功能的不同可以先學(xué)習(xí)不同的模塊，可以實(shí)現(xiàn)快速上手。而react的學(xué)習(xí)對于原生以及底層的應(yīng)用更多，所以要求也就更高一些

3.優(yōu)化方面

在 React 應(yīng)用中，當(dāng)某個組件的狀態(tài)發(fā)生變化時，它會以該組件為根，重新渲染整個組件子樹。如要避免不必要的子組件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手動實(shí)現(xiàn) shouldComponentUpdate 方法。同時你可能會需要使用不可變的數(shù)據(jù)結(jié)構(gòu)來使得你的組件更容易被優(yōu)化。 然而，使用 PureComponent 和 shouldComponentUpdate 時，需要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。如果不符合這個情況，那么此類優(yōu)化就會導(dǎo)致難以察覺的渲染結(jié)果不一致。這使得 React 中的組件優(yōu)化伴隨著相當(dāng)?shù)呢?fù)擔(dān)。

使用MVVM好處:

1. 低耦合。View可以獨(dú)立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當(dāng)View變化的時候Model可以不變，當(dāng)Model變化的時候View也可以不變。

2. 可重用性。可以把一些視圖的邏輯放在ViewModel里面，讓很多View重用這段視圖邏輯。

3. 獨(dú)立開發(fā)。開發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)。設(shè)計人員可以專注于界面(View)的設(shè)計。

4. 可試性。可以針對ViewModel來對界面(View)進(jìn)行測試。可以針對ViewModel來對界面(View)進(jìn)行測試 。

四、Vue.js的核心思想

1. 數(shù)據(jù)驅(qū)動

ViewModel中有：DOM Listeners(監(jiān)聽) 和 Directives(指令)

View 對應(yīng)的 DOM對象。

ViewModel是一個很好的設(shè)計，如果沒有ViewModel，那么我們在View和Model之間的驅(qū)動是由手動觸發(fā)DOM改變，是一個很繁瑣的過程，如果我們使用了ViewModel之后，就省略了手動操作的步驟了，在Vue.js里面，我們我們只需要改變數(shù)據(jù)，Vue.js只需通過Directives指令去對DOM做一層封裝，當(dāng)數(shù)據(jù)發(fā)生變化，就會通知指令去修改DOM,數(shù)據(jù)是DOM的一種自然映射。Vue.js還會對操作做一層監(jiān)聽，當(dāng)我們修改視圖的時候，Vue.js會監(jiān)聽這些變化，從而改變Model。從而實(shí)現(xiàn)了雙向綁定。

通過數(shù)據(jù)驅(qū)動界面更新, 無需操作DOM來更新界面。使用Vue我們只需要關(guān)心如何獲取數(shù)據(jù), 如何處理數(shù)據(jù), 如何編寫業(yè)務(wù)邏輯代碼，我們只需要將處理好的數(shù)據(jù)交給Vue, Vue就會自動將數(shù)據(jù)渲染到模板中(界面上)。

2. 組件化

概念:把代碼重復(fù)的部分提取提煉出一個一個組件供給功能使用.

使用:toast彈框的實(shí)現(xiàn)，搭配UI框架實(shí)現(xiàn)樣式，同時利用組件化的方式完成彈框功能的實(shí)現(xiàn)。

目的:功能的復(fù)用以及解耦，并且每個組件之間的既可以有依賴又是相互獨(dú)立的

比如上圖中的布局，header，left，right以及footer區(qū)域分別都是一個獨(dú)立的組件，每個組件之間的功能又不會有影響，并且每個組件還可以引入公共的組件。

五.組件的設(shè)計原則：

頁面上每個獨(dú)立的可視/可交互區(qū)域都被視為一個組件。

每個組件對應(yīng)一個工程目錄，組件所需要的各個組件在這個目錄下就近維護(hù)。這個就提現(xiàn)了前端的工程化思想，為前端開發(fā)提供了很好的分支策略，每個開發(fā)者都清楚地知道自己所開發(fā)維護(hù)的功能單元，代碼必然存在于自己的組件目錄中，在這個目錄中就可以清楚知道自己的功能的內(nèi)部邏輯以及資源，樣式，功能都可以寫在里面。在Vue.js中，可以通過.vue文件把組件依賴的模板，js，和css都寫在一個文件中，這個就把就近維護(hù)思想發(fā)揮到極致。

頁面不過是組件的容器，組件可以嵌套自由組合形成完整的頁面。

五、MVVM模式與MVC模式區(qū)別

MVVM 由 Model,View,ViewModel 三部分構(gòu)成：

M： Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯

V： View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來，也就是指DOM層 或用戶界面

VM: ViewModel 是一個同步View 和 Model的對象，用于處理數(shù)據(jù)和界面的中間層

MVVM包括view視圖層、model數(shù)據(jù)層、viewmodel層。各部分通信都是雙向的。采用雙向數(shù)據(jù)綁定，View的變動，自動反映在 ViewModel，反之亦然。其中ViewModel層，就是View和Model層的粘合劑，他是一個放置用戶輸入驗(yàn)證邏輯，視圖顯示邏輯，發(fā)起網(wǎng)絡(luò)請求和其他各種各樣的代碼的極好的地方,最終就是把原來ViewController層的業(yè)務(wù)邏輯和頁面邏輯等剝離出來放到ViewModel層
MVC是包括view視圖層、controller控制層、model數(shù)據(jù)層。各部分之間的通信都是單向的。
View 傳送指令到 ControllerController 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)Model 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋
六、Vue起步

1.安裝

安裝方式主要分以下幾種方式：

1. 直接下載vue.js文件，并且在頁面中使用

2.可以通過CND的方式引入vue，方法:

(1)生成環(huán)境的安裝方法，避免發(fā)生不可以預(yù)期的問題所以建議使用添加版本號

3.通過npm方式引入

# 最新穩(wěn)定版 $ npm install vue

2.使用

1. 首先創(chuàng)建index.html文件

2. 其次在index.html文件中引入script鏈接，那么此時需要注意以上三種引入方式均可以

3. 再次需要定義一個vue實(shí)例對象，進(jìn)行元素掛載，那么下面就用代碼方式給大家展示頁面的渲染以及效果圖

HTML部分:

1. <div id="app"> 
2.      {{message}} 
3.  div> 

JS部分

1. let vm = new Vue({ 
2.        el:'#app', 
3.        data:{ 
4.            message:'hello Vue' 
5.        } 
6.    }) 

頁面效果:

我們已經(jīng)成功創(chuàng)建了第一個 Vue 應(yīng)用!看起來這跟渲染一個字符串模板非常類似，但是 Vue 在背后做了大量工作。現(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的而且根據(jù)以上的操作就可以在瀏覽器中正常輸出hello,vue，這也就完成了第一步的渲染，那接下來就看下每個參數(shù)的具體用法

2.1 el配置項

1. let vm = new Vue({ 
2.        el:'#app', 
3.  }) 

首先：頁面需要使用vue那么首先要創(chuàng)建vue實(shí)例對象

其次：el 是掛載點(diǎn) 可以使用css的選擇器

再次: 一個vue實(shí)例，只能掛載到一個節(jié)點(diǎn)上，如果滿足el的節(jié)點(diǎn)有多個，那么掛載到滿 足條件的第一個節(jié)點(diǎn)

最后: 一般情況下掛載到id選擇器

注意: el不能設(shè)置為html或者body

2.2 Data配置項

1. let vm = new Vue({ 
2.        el:'#app', 
3.        data:{ 
4.            message:'hello Vue' 
5.        } 
6.  }) 

首先:data配置項的內(nèi)容即將會被展示到瀏覽器中

其次:data在.html文件中的定義為對象的方式，之后會使用vue-cli(腳手架)，那么此時對于data將被定義為函數(shù)的方式(后面會做詳細(xì)的介紹)

再次：在data中定義想要在頁面中輸出的內(nèi)容的變量名(message)，同時把想要輸出的內(nèi)容賦值給當(dāng)前定義的變量名即可.

最后：完成定義后直接運(yùn)行html文件即可看到輸出內(nèi)容：hello Vue

以上是對vue中的數(shù)據(jù)想要渲染到頁面上的一種方式，那么除了上述的方式，我們還有可以通過指令的方式進(jìn)行綁定，那接下來的文章將會對vue中具體的指令以及其他vue的配置項做介紹。

七、搭建一個完整的vue項目

之前有在網(wǎng)上查看過很多vue項目的搭建,最終都很難搭建出一個完整的vue項目.尤其是對初學(xué)者來說.以下是鄙人經(jīng)過千錘百煉,總結(jié)出來的,可供大家參考.

1.安裝node環(huán)境

1. 下載地址為:https://nodejs.org/en/

2. 檢查是否安裝成功,輸出版本號,表示安裝成功.

3. 為了提高下載速度,我們可將安裝路徑改為使用淘寶鏡像http://npm.taobao.org/

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

即可安裝npm鏡像,往后使用到npm的地方使用cnpm就行.

5. 檢查cnpm是否安裝成功

2.安裝webpack打包工具

2.1介紹webpack

webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

其中包含四個核心概念

· 入口(entry)：指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。進(jìn)入入口起點(diǎn)后，webpack 會找出有哪些模塊和庫是入口起點(diǎn)(直接和間接)依賴的

· 輸出(output)：告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件，默認(rèn)值為 ./dist

· loader：讓 webpack 能夠去處理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)

· 插件(plugins)：插件則可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。插件接口功能極其強(qiáng)大，可以用來處理各種各樣的任務(wù)。

2.2 webpack的作用

上面對webpack的介紹其目的就是使用webpack工具能很好快速的對象項目進(jìn)行打包.

2.3 安裝

(1) 運(yùn)行CMD，安裝命令如下所示，其中， -g是全局安裝安裝 cnpm i webpacki -g

(2) 運(yùn)行CMD，安裝命令如下所示，其中， -g是全局安裝安裝cnpm i webpack-cli -g

(3) 輸入如下命令，若出現(xiàn)版本號, 檢查是否安裝成功

3. 搭建vue項目

1. 安裝cnpm i vue-cli -g 全局安裝

2. 新建一個目錄(文件夾),例如:demo

3. 進(jìn)入demo目錄, cd demo

4.創(chuàng)建一個基于webpack模板的項目,

默認(rèn)創(chuàng)建到demo目錄下,輸入Y即可

5.由于最后選擇的是自己安裝依賴項.所以解下來,我們可以通過cnpm i,來安裝依賴項.

通過淘寶鏡像下來依賴項會比npm快很多,所以建議大家使用cnpm i來進(jìn)行安裝

6. 安裝成功之后,目錄文件如下:

7. 目錄介紹

在此說明下,-表示目錄, .表示文件

-build webpack的打包配置文件

-config 項目的配置文件

-node_modules 安裝依賴包等的相關(guān)模塊

-src 你寫的項目

-static 靜態(tài)資源文件eg:css js img等

1.靜態(tài)資源文件不參與壓縮打包

2.在index.html文件引入static的靜態(tài)資源文件

.babelrc es6轉(zhuǎn)es5的配置項

.editorconfig: 編輯器的配置項

.gitignore 上傳到github上要忽略的文件

.postcssrc.js css的配置文件

.index.html 項目唯一的頁面

.package.json 存放項目的描述 依賴項的詳細(xì)信息和相關(guān)版本

.read.me 有關(guān)項目的啟動信息

8. src目錄介紹

在此說明下,-表示目錄, .表示文件

-assets 存放靜態(tài)資源文件: eg:css js img

1.靜態(tài)資源文件參與壓縮打包

2.在main.js文件引入asstes的靜態(tài)資源文件

-components: 局部組件

-common 全局組件

-utils 工具類

-filters 過濾

App.vue 唯一的根組件

main.js 唯一的入口文件

9. 啟動項目

npm run dev

當(dāng)看到此界面時,表示項目啟動成功

10. 打開瀏覽器,運(yùn)行:http://localhost:8080/#/

啟動成功并訪問

 

接下來就玩轉(zhuǎn)你的vue項目吧.

4. 項目介紹

要想使用vue項目做一套屬于自己的完成開發(fā).在啟動之前,我們需要一些清空工作.如下:

1.清空相關(guān)工作

App.vue 清空,只留vue模板

components 清空(刪除helloWorld.vue)

assets 清空(刪除logo.png)

Vue模板如下:

1.  
2.  
3.  
4.  
5.  
6.  
7.  

2.src目錄中僅留下四個文件

assets(空的)

components(空的)

App.vue(只有vue模板)

main.js (唯一入口文件)

5. 使用項目

1. 在src/components目錄下,新建一個如下幾個文件:header.vue main.vue footer.vue left.vue right.vue

2. 在App.vue 中分別導(dǎo)入header.vue main.vue footer.vue這三個文件,如下所示:

1.  
2.  
3.  

1. style> 
2. /* 樣式代碼 */ 
3. .container{ 
4.   width:100vw; 
5.   height: 100vh; 
6.   background: grey; 
7.   display: flex; 
8.   flex-direction: column; 
9. } 
10.  

3. 在main.vue 文件中引入left.vue 和right.vue兩個文件.代碼如下:

1.  
2.  
3.  

1.  

4. header.vue和footer.vue代碼如下所示:

Header.vue

2.   ="header"> 
3.     

   header

    
4.    
5.  
6.  
7.  

1.  

Footer.vue

2.   ="footer"> 
3.     

   footer

    
4.    
5.  
6.  
7.  
8.  
9.  

5. left.vue 和right.vue如下所示

Left.vue

2.   ="left"> 
3.     

   left

    
4.    
5.  
6.  
7.  

1.  

Right.vue

2.   ="right"> 
3.     

   right

    
4.    
5.  
6.  
7.  

1.  

6. 已上就做了一個網(wǎng)頁布局的形式,通過:http://localhost:808/#/可訪問網(wǎng)頁布局

已上就是有關(guān)vue完整項目的介紹.