对于现在前端插件的频繁更新，我也是无力吐槽，但是既然入了前端的坑就得认嘛，所以多多少少要对组件化有点了解，至于神马是组件化，出门左转问度娘哈。今天有空，试了试使用webpack+vuejs来做个小组件，接下来就是这个简单的demo和我总结的一点点小经验哈。
首先 webpack 和 vue 我就不做介绍了，这些大名鼎鼎的东西作为一个前端应该是要懂得哈，不懂的话就得自己去了解哦。说到这里不得不说 vue-loader ，vue-loader 支持将 .vue 文件转换为一个vue组件，而且该 .vue 文件内甚至可以包含组件的样式，这个不得不说是一个组件化的亮点。
.vue 文件的格式可以如下：
<template>
<h3>here is a test input</h3>
<input type="text" class="input" v-model="msg" placeholder="请输入..." >
<p>{{msg}}</p>
</template>
<script>
module.exports = {
props: {
rules:{
type: String // 制定传递参数类型
}
},
data: function data() {
return {
msg: ""
};
}
}
</script>
<style>
.input{
border-radius: 6px;
border:1px solid #eee;
background:#fff;
line-height: 40px;
font-size:16px;
text-indent: 12px;
}
.input-msg{
color:red;
font-size:14px;
line-height: 40px;
}
</style>
如上所示 .vue 文件里，包含了一个 template ，就是html模板， 一个script 该script将暴露出一个对象，该对象的属性和单独使用 new vue({}) 里的对象一样，不过这个data并不是一个对象，而是一个函数，该函数返回一个object，这样可以避免你多次使用该组件时数据被同步。
我们给该文件命名为 input.vue ，接下我们建立一个 main.js 来引用这个 vue 组件，代码如下：
var Vue = require('vue')
var app = new Vue({
el: '#app',
data: {
views: 'my-input'
},
components: {
'my-input': require('./components/input.vue')
}
})
如上代码，我将该组件局部引用并命名为 my-input ，接下来我就可以在html文件里使用
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h3>test 22 33</h3>
<div id="app">
<p>{{views}}</p>
<component :is="views" ></component>
<my-input></my-input>
</div>
<script src="build/build.js"></script>
</body>
</html>
component 和 my-input 这俩种组件引用方式实际上表现是一样的，都是引用input.vue的组件。不同的是，使用component标签的如果有多个组件的话，可以动态的切换组件。 接下来是webpack的配置文件：
如上所示，我们只需要对 .vue 的文件使用 vue-loader 来处理，即可将其自动变成一个vue组件。这样执行webpack打包以后即可得到我们的最终代码。