早就写好的一片文章忘了发, 哈哈, 补上:
对于现在前端插件的频繁更新, 我也是无力吐槽, 但是既然入了前端的坑就得认嘛, 所以多多少少要对组件化有点了解, 至于神马是组件化, 出门左转问度娘哈. 今天有空, 试了试使用 webpack+vuejs 来做个小组件, 接下来就是这个简单的 demo 和我总结的一点点小经验哈.
首先 webpack 和 vue 我就不做介绍了, 这些大名鼎鼎的东西作为一个前端应该是要懂得哈, 不懂的话就得自己去了解哦. 说到这里不得不说 vue-loader ,vue-loader 支持将 .vue 文件转换为一个 vue 组件, 而且该 .vue 文件内甚至可以包含组件的样式, 这个不得不说是一个组件化的亮点.
.vue 文件的格式可以如下:
html 代码
- <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 组件, 代码如下:
JavaScript 代码
- var Vue = require('vue')
- var App = new Vue({
- el: '#App',
- data: {
- views: 'my-input'
- },
- components: {
- 'my-input': require('./components/input.vue')
- }
- })
如上代码, 我将该组件局部引用并命名为 my-input , 接下来我就可以在 HTML 文件里使用
标签来引用该组件.
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 打包以后即可得到我们的最终代码.
我对该组件添加了表单验证功能, 这样制作表单验证时就可以反复使用同一个组件以及相关规则.
点击此处查看 点击此处 http://mikoshu.me/vue-demo/wwwroot/index.HTML 该组件的源码请点击 https://GitHub.com/mikoshu/vue-demo https://GitHub.com/mikoshu/vue-demo
此处 demo 后来又有更新, 不单单只有表单验证, 新添加了省市县三级联动和可以搜索的 select 组件, 都是基于 vuejs 和 webpack.
来源: http://www.qdfuns.com/article/16079/7ada8545e70b5439c40babdbb4bb3063.html