自定义vue2.0全局组件(上篇)

  1. 云栖社区>
  2. 博客>
  3. 正文

自定义vue2.0全局组件(上篇)

小丑丁丁 2017-06-15 13:05:08 浏览1435
展开阅读全文
随着vue.js的发展,一些基于vue.js的框架如雨后春笋般出现在开发者面前(例如:Element-ui、Mint-ui)。但是,无论哪一种框架都不可能完全满足项目需求,有时需要开发者自己编写自定义组件。那怎样编写自定义组件呢?今天,老K为大家分享一下自己常用的方法。

按钮是经常使用的组件之一。Element-ui中的按钮组件说明,如下图:

今天,我们就拿这个按钮组件为例为大家编写一个自己的按钮组件。
前期准备:node.js开发环境,npm包管理器或者cnpm包管理器(推荐cnpm,速度快)。
首先,打开命令行窗口,用脚手架工具vue-cli搭建一个vue2.0开发环境。我们选择搭建一个webpack-simple并放到custom-global-component目录里。如下图:
按步骤依次完成环境搭建。然后进入custom-global-component文件里,输入命令cnpm init完成依赖包的安装,然后输入命令npm run dev,启动测试环境。如下图:
如果一切顺利,会出现vue.js经典的欢迎页。如下图:
然后进入custom-global-component/src目录里,打开App.vue,为了便于测试,将多余代码删掉。如下图:
代码删掉后,写上本次的主题名称。如下图:
测试页面同时会自动更新,如下图:
custom-global-component/src目录里,新建components目录,用来放组件文件。如下图:
进入components目录,新建button目录。这就是我们今天做的button组件的所在位置。
如下图:
进入button目录里,新建入口文件index.js、组件文件Button.vue,如下图:
打开Button.vue,为了是我们的组件具有良好的可扩展性,我们采用vue.js的render方法创建组件模板。如下图:
组件标签名为“<g-button>”,转义的html标签名为“<button>”,默认具有的样式class名为“g-button”。
进入入口文件index.js,引入button组件模板,生成名为“g-button”的vue组件并输出。如下图:
这样一个普通的button组件就完成了。
现在,我们回到src目录下,尝试一下我们新编写的组件。打开main.js和App.vue文件,引入并使用这个组件,如下图:
main.js

App.vue

预览结果:
这样,一个可以复用的初级按钮组件就完成了。上述代码我已提交到github,欢迎参考!
代码地址:https://github.com/gaofei019/vue2.0-custom-global-component.git
当然,这个组件远没有达到完美,扩展性还不够强大。下一篇,老K还会为大家继续完善这个按钮组件,敬请期待...

点击查看公众号文章
欢迎关注个人公众号,查看更多好文。1.gif
3c9443f5671a70732ca1e6ee8cdd027439c92725

网友评论

登录后评论
0/500
评论
小丑丁丁
+ 关注