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

wocacaca
wocacaca 发布于 2016-10-14 16:28:23 浏览:650 类型:原创 - 随笔 分类:类库框架 - 小demo 二维码: 作者原创 版权保护
早就写好的一片文章忘了发,哈哈,补上:
对于现在前端插件的频繁更新,我也是无力吐槽,但是既然入了前端的坑就得认嘛,所以多多少少要对组件化有点了解,至于神马是组件化,出门左转问度娘哈。今天有空,试了试使用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>

如上代码 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
此处demo后来又有更新,不单单只有表单验证,新添加了省市县三级联动和可以搜索的select组件,都是基于vuejs和webpack。
z
给个赞 0 人点赞
收藏 0 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
wocacaca wocacaca 作者

快闪开,我要帅炸了!

作者最新