初次实验:webpack+vuejs实现前端组件化

对于现在前端插件的频繁更新,我也是无力吐槽,但是既然入了前端的坑就得认嘛,所以多多少少要对组件化有点了解,至于神马是组件化,出门左转问度娘哈。今天有空,试了试使用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模板, 一个scriptscript将暴露出一个对象,该对象的属性和单独使用 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>

如上代码 build.js 是我最终用 webpack 打包后的代码,里面包含了 main.js, input.vue,以及 vue.js 。此处可看接下来的webpack配置文件。component my-input 这俩种组件引用方式实际上表现是一样的,都是引用input.vue的组件。不同的是,使用component标签的如果有多个组件的话,可以动态的切换组件。 接下来是webpack的配置文件:

如上所示,我们只需要对 .vue 的文件使用 vue-loader 来处理,即可将其自动变成一个vue组件。这样执行webpack打包以后即可得到我们的最终代码。

我对该组件添加了表单验证功能,这样制作表单验证时就可以反复使用同一个组件以及相关规则。

点击此处查看 点击此处该组件的源码请点击 https://github.com/mikoshu/vue-demo

发表评论

电子邮件地址不会被公开。 必填项已用*标注