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

一、Vue.js 是什么

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

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

什么是漸進式框架

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

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

二、Vue.js的優點

1. 簡單易用

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

2. 靈活漸進式

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

3. 輕量、高效

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

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

4. 雙向數據綁定

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

5. 生態豐富，學習成本低

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

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

1.Vue特點:

Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。

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

相同點：

1.都支持指令:基礎指令以及自定義指令

2.都支持過濾器:內置過濾器和自定義過濾器

3.都支持雙向數據綁定

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

不同點：

1.學習成本

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

2. 更靈活

比起 Angular更少專制，它能讓你按照自己想要的方式構建應用

3.性能方面

AngularJS依賴對數據做臟檢查，當 watcher 越來越多時會變得越來越慢，因為作用域內的每一次變化，所有 watcher 都要重新計算。并且，如果一些 watcher 觸發另一個更新，臟檢查循環(digest cycle)可能要運行多次。Vue依賴追蹤的觀察系統并且異步列隊更新，所有的數據變化都是獨立地觸發，除非它們之間有明確的依賴關系。

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

相同點：

1. 都是組件化開發

2. 都提供了合理的鉤子函數

不同點：

1.性能方面

Vue性能上更有優勢，因為 Vue 的虛擬DOM 實現相對更為輕量一些，整體大小比react.js更小更輕便

2.學習成本方面

Vue更容易上手，根據功能的不同可以先學習不同的模塊，可以實現快速上手。而react的學習對于原生以及底層的應用更多，所以要求也就更高一些

3.優化方面

在 React 應用中，當某個組件的狀態發生變化時，它會以該組件為根，重新渲染整個組件子樹。如要避免不必要的子組件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法。同時你可能會需要使用不可變的數據結構來使得你的組件更容易被優化。 然而，使用 PureComponent 和 shouldComponentUpdate 時，需要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。如果不符合這個情況，那么此類優化就會導致難以察覺的渲染結果不一致。這使得 React 中的組件優化伴隨著相當的負擔。

使用MVVM好處:

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

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

3. 獨立開發。開發人員可以專注與業務邏輯和數據的開發(ViewModel)。設計人員可以專注于界面(View)的設計。

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

四、Vue.js的核心思想

1. 數據驅動

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

View 對應的 DOM對象。

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

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

2. 組件化

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

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

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

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

五.組件的設計原則：

頁面上每個獨立的可視/可交互區域都被視為一個組件。

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

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

五、MVVM模式與MVC模式區別

MVVM 由 Model,View,ViewModel 三部分構成：

M： Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯

V： View 代表UI 組件，它負責將數據模型轉化成UI 展現出來，也就是指DOM層 或用戶界面

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

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

1.安裝

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

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

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

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

3.通過npm方式引入

# 最新穩定版 $ npm install vue

2.使用

1. 首先創建index.html文件

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

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

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.    }) 

頁面效果:

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

2.1 el配置項

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

首先：頁面需要使用vue那么首先要創建vue實例對象

其次：el 是掛載點 可以使用css的選擇器

再次: 一個vue實例，只能掛載到一個節點上，如果滿足el的節點有多個，那么掛載到滿 足條件的第一個節點

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

注意: el不能設置為html或者body

2.2 Data配置項

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

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

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

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

最后：完成定義后直接運行html文件即可看到輸出內容：hello Vue

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

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

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

1.安裝node環境

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 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

其中包含四個核心概念

· 入口(entry)：指示 webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點(直接和間接)依賴的

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

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

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

2.2 webpack的作用

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

2.3 安裝

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

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

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

3. 搭建vue項目

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

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

3. 進入demo目錄, cd demo

4.創建一個基于webpack模板的項目,

默認創建到demo目錄下,輸入Y即可

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

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

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

7. 目錄介紹

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

-build webpack的打包配置文件

-config 項目的配置文件

-node_modules 安裝依賴包等的相關模塊

-src 你寫的項目

-static 靜態資源文件eg:css js img等

1.靜態資源文件不參與壓縮打包

2.在index.html文件引入static的靜態資源文件

.babelrc es6轉es5的配置項

.editorconfig: 編輯器的配置項

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

.postcssrc.js css的配置文件

.index.html 項目唯一的頁面

.package.json 存放項目的描述 依賴項的詳細信息和相關版本

.read.me 有關項目的啟動信息

8. src目錄介紹

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

-assets 存放靜態資源文件: eg:css js img

1.靜態資源文件參與壓縮打包

2.在main.js文件引入asstes的靜態資源文件

-components: 局部組件

-common 全局組件

-utils 工具類

-filters 過濾

App.vue 唯一的根組件

main.js 唯一的入口文件

9. 啟動項目

npm run dev

當看到此界面時,表示項目啟動成功

10. 打開瀏覽器,運行:http://localhost:8080/#/

啟動成功并訪問

 

接下來就玩轉你的vue項目吧.

4. 項目介紹

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

1.清空相關工作

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 中分別導入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. 已上就做了一個網頁布局的形式,通過:http://localhost:808/#/可訪問網頁布局

已上就是有關vue完整項目的介紹.