騰訊DeepOcean原創文章：dopro.io/explore-vue…
就在前幾個月，Vue star 數突破了 100k，正式超越 React。
一、扯點家常
都說前端是個更新迭代飛快的領域，前端框架的演進也越來越激烈，以至於在技術社群裡總看到有人求饒：“求不要更新了，老子學不動了”。在過去的好多些年，jQuery 在前端領域都處於統治地位，在眾多框架中脫穎而出，很多寫慣了 jQuery 語法的開發者們，都發現再也回不去寫原生 JS 了。隨著時間的發展，也出現了各式各樣的優秀框架，難免不同框架的粉絲也會把不同框架拿來對比，甚至互掐。說說今日的主角，Vue，在近幾年也是非常火的一個框架。對於初學者來說，Vue 上手的成本真的很低了，易用度非常高，並且因為是國內開發者開發的，文件都是中文，國內大批量的公司都在使用，也導致了 Vue 的增速特別快。
不過也正是有不同框架的更新迭代，相互競爭，才創造一個越來越好的前端世界。正如 Vue 開發者在 twitter 釋出的一條資訊：
二、初入 Vue 大門
1. 什麼是 Vue？Vue 是一套用於構建使用者介面的漸進式框架。它有著如下特點：
- 漸進式框架，採用自底向上增量開發設計
- 模版雙向繫結機制
- 利用指令（directive）對 DOM 進行封裝
- 元件化設計思想
Vue 的元件化將 UI 頁面分割為若干元件進行組合和巢狀
2. 快速上手 Vue工欲善其身，必先利其器。
無論我們學習哪種框架，搭建環境是必經之路。Vue 提供了一個官方的 CLI，為單頁面應用快速搭建繁雜的腳手架。當然，任何的前提都是首先你瞭解了 Vue 相關的概念，不然新手一上來搭建 Vue-cli，看到裡面牽扯到的 webpack、npm、nodejs等等概念，也是會一臉懵逼，很容易有從入門到放棄的想法的。
在搭建 Vue-cli 這點上，我們不妨直接站在巨人的肩膀上，這裡有一篇帶大家快速開啟第一個 Vue 頁面的教程，非常推薦：juejin.im/entry/58f48… 。
三、Vue 元件化
天下武功，唯快不破。元件化的好處不用一一細說大家都知道了，元件是 Vue.js 最強大的功能之一，讓我們用獨立可複用的小元件來構建大型應用，開發效率更快更敏捷。為了更好地複用，這裡以建立彈窗元件為例項，談談如何建立一個專案的元件庫。
1. 元件庫結構
qqcartoon-ui // 元件庫名字複製程式碼
├── index.js // 元件檔案複製程式碼
├── aa1 // 各個元件包複製程式碼
├── bb1複製程式碼
├── dialog 複製程式碼
├── index.js // 元件註冊複製程式碼
├── src複製程式碼
├── index.scss // 元件樣式複製程式碼
├── index.vue // 元件結構 複製程式碼
├──複製程式碼
└── ... 複製程式碼
一般在 Vue 裡，我們會把元件寫在 components 裡，但是為了建立一個可以多個專案共用的元件庫，這裡重新命名，如 qqcartoon-ui 。
- index.js：收錄了元件庫裡各個元件，以作為例項引用的入口。
import UIDialog from './dialog/index'複製程式碼
import UIA from './aa1/index'複製程式碼
import UIB from './bb1/index'複製程式碼
複製程式碼
export {複製程式碼
UIDialog,複製程式碼
UIA,複製程式碼
UIB複製程式碼
}複製程式碼
- dialog/index.js：完成元件註冊。
import UIDialog from './src/index';複製程式碼
複製程式碼
UIDialog.install = function(Vue){複製程式碼
Vue.component(UIDialog.name,UIDialog);複製程式碼
};複製程式碼
複製程式碼
export default UIDialog;複製程式碼
- dialog/index.scss：元件樣式。
.ui-dialog {複製程式碼
position: fixed;複製程式碼
top: 0px;複製程式碼
left: 0px;複製程式碼
width: 100%;複製程式碼
height: 100%;複製程式碼
z-index: 9999;複製程式碼
-webkit-box-orient: horizontal;複製程式碼
-webkit-box-pack: center;複製程式碼
-webkit-box-align: center;複製程式碼
background: rgba(0,0,0,0.4);複製程式碼
}複製程式碼
...... 省略其餘樣式程式碼複製程式碼
- dialog/index.vue：元件結構。元件的模版只能有一個根元素。
<template>複製程式碼
<div class="ui-dialog" :style="{diaplay:show?'-webkit-box':'none'}">複製程式碼
<div class="ui-dialog-cnt">複製程式碼
<div class="ui-dialog-bd">複製程式碼
<h4>{{title}}</h4>複製程式碼
</div>複製程式碼
</div>複製程式碼
</div>複製程式碼
</template>複製程式碼
<style lang="scss" src="./index.scss"></style>複製程式碼
<script>複製程式碼
export default {複製程式碼
name:'UIDialog',複製程式碼
props:{複製程式碼
show:{複製程式碼
type:Boolean,複製程式碼
default:false複製程式碼
},複製程式碼
title:{複製程式碼
type:String,複製程式碼
default:"這是標題"複製程式碼
}複製程式碼
}複製程式碼
}複製程式碼
</script>複製程式碼
2. 元件的引用
在專案的根目錄下，你可以找到一個 js 檔案，可能它的命名是 main.js。在裡面引入你需要的元件名。
import {UIDialog} from '@/qqcartoon-ui/packages/index'複製程式碼
Vue.use(UIDialog)複製程式碼
這個時候，彈窗元件就已經引用到專案中了，這時候只需要最後一步，在專案 vue 檔案裡使用：
<UIDialog :show="true"></UIDialog>複製程式碼
這個時候編譯程式碼，就可以在瀏覽器看到最終的彈窗效果啦！
四、Vue 元件規範化
- UI 的展示
- 與使用者的互動（事件）
- 動畫效果
- props 允許外部環境傳遞資料給元件。
- events 允許元件出發外部環境的副作用。
<ul id="app">複製程式碼
<li v-on:click = "clickMe">單擊事件</li>複製程式碼
</ul>
複製程式碼
複製程式碼
<script>
複製程式碼
var app = new Vue({複製程式碼
el : '#app',複製程式碼
data : {複製程式碼
},複製程式碼
methods : {複製程式碼
clickMe : function(){複製程式碼
console.log('單擊事件發生');複製程式碼
}複製程式碼
}複製程式碼
})
複製程式碼
</script>
複製程式碼
- slot 允許外部環境將額外的內容組合在元件中。
<div>複製程式碼
<h2>我是子元件的標題</h2>複製程式碼
<slot>複製程式碼
只有在沒有要分發的內容時才會顯示。複製程式碼
</slot>複製程式碼
</div>複製程式碼
父元件模版：
<div>複製程式碼
<h1>我是父元件的標題</h1>複製程式碼
<my-component>複製程式碼
<p>這是一些初始內容</p>複製程式碼
</my-component>複製程式碼
</div>複製程式碼
渲染結果：
<div>複製程式碼
<h1>我是父元件的標題</h1>複製程式碼
<div>複製程式碼
<h2>我是子元件的標題</h2>複製程式碼
<p>這是一些初始內容</p>複製程式碼
</div>複製程式碼
</div>複製程式碼
五、總結
元件，是一個具有一定功能，且不同元件間功能相對獨立的模組。元件可以是一個按鈕、一個輸入框、一個視訊播放器等等。打造可複用的元件，應該具備高內聚、低耦合的特點。本文帶大家走進 Vue 元件化的世界，要想真正成為 Vue 頭號玩家，還是要多實操練習，在專案中不斷思考。歡迎關注"騰訊DeepOcean"微信公眾號,每週為你推送前端、人工智慧、SEO/ASO等領域相關的原創優質技術文章：
看小編搬運這麼辛苦，關注一個唄：)
