引子
从事前端开始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的属性名对号入座，也即是各回各家各找各妈’。
先来个例子
代码如下：
<!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组件（如何管理并完善自己的模版库）就说到这里，下一篇我会说一说如何灵活运用并开发自己的组件。
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
