MVVM開發——vue元件（如何管理並完善自己的模版庫）

緣自世界發表於2017-09-04
MVVMVue元件

引子

從事前端開始2年以上的同學，都在為一件事兒而煩惱，不錯除了money外，就是如何擁有一套自己使用起來得心應手的前端模版庫。可能有些同學說我們可以用第三方，不錯，這的確是一個很好的方案，但是作為一個追求完美或者可以說希望省時省力的前端開發者來說，任何一個前端框架可能會很接近我們的要求，但他不能完全滿足我們的需求。所以，選擇好一個熟悉的前端框架庫後，根據自己的專案需求可以不斷的完善我們的前端模版庫，當然，對於目標遠大的同學，完完全全可以獨立的寫一套具有自己風格特點的前端模版庫，這樣更加值得讚賞。

基於vue技術的前端模版庫實現

從我接觸vue的這半年多來，我對前端開發的認識有了很大的轉變。從開始在公司裡使用公司指定的一些前端的開發框架到技術選型，再到根據公司的需要做跨平臺的開發專案，再到後來應客戶的要求我們做使用者指定技術選型的專案，所以就接觸到了angular，vue這種MVVM的技術選型的專案，剛接觸到這種MVVM技術的時候，看開發文件，感覺這樣的技術真是太棒了，到後來發現技術是不錯，但由於基礎的時間短，使用這種技術開發專案的經驗為無，所以，開發的進度並沒有像我們想象中的那樣會縮短，反而，由於一些vue存在的坑和本身技術經驗的缺乏，再加之去年還沒有出現像現在這樣比較成熟穩定的框架，所以，最後開發出的專案雖然，管理起來相當容易，但是可重用性很低，也自己嘗試著寫了一些自己認為不錯的框架，但還是不溫不火，在這個專案中能很好的使用，但在另一個專案中就會出現一些問題。

因此，現在出現的框架比如muse-ui,element-ui的出現給了我們巨大的福音，我們可以仿照這種已有的前端框架，根據自己的使用習慣和公司的使用要求，我們選擇恰當的前端框架，並完善它，就是我們需要做的重中之重的問題了。

那麼，開發框架模版庫需要詳細瞭解的知識點是什麼呢，下面我們就來談談。

vue中我們所需要的知識點

1.我們需要的就是熟練的掌握，vue的選項（資料、dom、生命週期鉤子、資源、組合等），例項（屬性、資料、事件、生命週期），指令，元件系統，以及vnode和服務端渲染等組成。

2.在模板庫中的完善過程中我們有兩個選擇方向，第一個是根據業務的需求不斷的開發出我們所需要的元件，第二個是，我們根據專案的需要可以不斷的增補外掛。這裡如何選擇全看助威的想法，我最近忙裡抽閒在做的是增補元件，這個我感覺使用起來更加的順手，但是不想說的，外掛更加獨立，我不排除我完善模版庫的過程中不會使用外掛。

3.我們需要選好一個框架，然後根據這個框架的特點來開發，所以，我們要深入理解這個框架，我選擇的是muse-ui.

muse-ui 框架概述

框架的使用（我是用的是muse-ui）

我們使用該框架時，和使用框架是不盡相同的具體使用我們可以參考muse-ui主頁的配置教程.

vue的使用

vue的使用教程就不用我來進行推薦了吧，angular的精品教程很少我相信，但vue的我相信有很多，這裡我就不一一列舉了。

vue元件的開發

這裡有一個地址包含了我們常用的大部分元件github地址
上面的元件都是我們開發的過程中可以使用的範例，元件常用開發姿勢我已經在我的前一篇文章《MVVM 開發總結 —— Vue 元件（你所需要知道的）》已經完全介紹過了，今天我們就進入元件的一種特殊但常見的開發形式。

元件的slot開發形式

slot是什麼

在vue.js官方的開發文件中slot被解釋為分發內容，說實話當時我看到之後也不是很理解。

第一印象：

如果著你把開發文件中的示例程式碼看一遍以後你就發現，這跟我們生活中常見的模板差不多。這種解釋是我我在知乎，segmentdefault,以及csdn瀏覽了相關的博文和帖子之後發現的一種，這種解釋很通俗易懂；

第二種比喻：

但是也有人把它稱之為插槽，舉的是一個電腦的例子，把一個專案比作電腦，專案中的一個頁面比作主機板，把我們的元件形象化為記憶體條，磁碟，獨立顯示卡等相關可插拔的硬體，這個例子比喻的很形象。

第三種抽象化：

有人把它理解為物件導向過程中的多型,雖然這種解釋在我們開發中有那麼的相似，但是我並不完全贊成這種解釋。如果真要是抽象化理解我更傾向於類的繼承。

（這裡歡迎各位大神提供參考意見）

slot的兩種使用方式

slot 在元件開發過程中分為兩種形式，匿名和具名兩種形式。

slot的第一彈

其實，現在寫了一些slot的組建後，發現解釋為內容分發也是比較恰當的，如果再給它加個備註的我想會幫助初學者不少，我的備註為‘內容更具slot的屬性名對號入座，也即是各回各家各找各媽’。

先來個例子

示例demo地址

程式碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue-slot</title>
    <script type="text/javascript" src="http://unpkg.com/vue"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        header{
            width:100%;
            height: 40px;
            font-size: 16px;
            color: #fff;
            line-height: 40px;
            text-align: center;
            background-color: #999;
        }
        main{
            width:100%;
            min-height:300px;
        }

        footer{
            width:100%;
            height: 40px;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            text-align: center;
            background-color: #999;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-template>
            <div slot="header">this is header</div>
            <p>this is default</p>
            <div slot="footer">this is footer</div>
        </my-template>
    </div>


    <script>
    Vue.component(`my-template`, {
        render: function(createElement) {
            var header = this.$slots.header
            var main = this.$slots.default
            var footer = this.$slots.footer
            return createElement(`div`, [
                createElement(`header`, header),
                createElement(`main`, main),
                createElement(`footer`, footer)
            ])
        }
    });
    var vm = new Vue().$mount(`#app`);
    </script>
</body>

</html>

書寫元件有兩種模式第一種就是我們常見的使用template屬性，第二種就是我們上面例子中的使用render函式，兩者都是用的情況下，render會覆蓋template，使用template的話，vue-loader會將template轉換為render。

到了現在vue元件（如何管理並完善自己的模版庫）就說到這裡，下一篇我會說一說如何靈活運用並開發自己的元件。

相關文章