自定义vue2.0全局组件（上篇）

随着 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还会为大家继续完善这个按钮组件，敬请期待...

点击查看公众号文章

欢迎关注个人公众号，查看更多好文。