引子

从事前端开始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组件(如何管理并完善自己的模版库)就说到这里,下一篇我会说一说如何灵活运用并开发自己的组件。