教你写VueUI组件库@vue2.0

教你写VueUI组件库对新手不友好。笔者结合官方文档，以及自己的摸索总结，以最简单的FlexBox组件为例，指导大家入门编写vue插件。---|---|flexbox#组件文件夹|---|---|---|flexbox.vue#flex布局的父组件|---|---|---|弹性框项目。vue#flex布局子组件|---|---|---|flexbox.scss#样式文件，我用的是sass|---|---|---|index.js#的组件导出|---|---|styles#公共css样式文件|---|---|index.js#导出插件|---|App.vue|---|main.js<1>让项目加载插件首先我们忽略组件的具体实现，让我们的项目正常加载一个自定义的插件。现在，我们的目标是让项目能够正常显示这两个组件，显示文本flexboxdemo就足够了！./src/plugin/flexbox/flexbox.vue./src/plugin/flexbox/flexboxItem.vue./src/plugin/flexbox/index.js这是整个flexbox组件的导出文件。\因为这个组件有两个子组件，所以我们将导入的默认重命名为这个组件的名称。{defaultasflexbox}//引用scss文件import'./flexbox.scss'//引用组件export{defaultasflexbox}from'./flexbox.vue'export{defaultasflexboxItem}from'./flexboxItem.vue'./src/plugin/index.js现在，我们来到插件的导出文件。//-----1import*asflexboxfrom'./flexbox'//-----2constcomponents={...flexbox}//-----3constinstall=function(Vue,Option){//-----4Object.keys(components).forEach((key)=>{Vue.component(components[key].name,components[key])})}//-----5exportdefault{install}引入components定义components变量这里是重点，vue提供了一个install(Vue,Option)方法来编写插件，为vue添加全局函数；这个方法有两个参数，第一个是Vue的构造函数，第二个是可选参数；使用vue的全局方法Vue.component(Name,Object)定义组件，第一个参数为组件名称，第二个参数为组件对象；最后，组件默认导出。./src/main.js我们来到main.js，在这里，我们将对插件进行最终配置。使用vue的全局方法Vue.use(PluginName,Options)，第一个参数是插件的名称，第二个是可选参数。importpluginfrom'./plugin'Vue.use(plugin)./src/App.vue终于可以在项目中引用我们定义好的组件了！Flexbox组件的实现组件的具体实现写在平时的Component方法现在都一样。先把代码贴在这里，具体原理我会写在代码注释里。./src/plugin/flexbox/flexbox.vue./src/plugin/flexbox/flexbox.scssscss定义要使用的样式。my-flexbox{width:100%;显示：flex;}.flex-vertical{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.flex-nowrap{flex-wrap:nowrap;}/*justify*/.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-space-between{justify-content:space-between}.justify-space-around{justify-content:space-around}/*align*/.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-center{对齐-items:center}.align-baseline{align-items:baseline}.align-stretch{align-items:stretch}./src/App.vue好的！我们可以在我们的项目中使用这个组件！你也可以让它们垂直！<3>FlexboxItem组件的实现flexbox-item组件和flexbox组件的实现原理类似，直接贴代码！./src/plugin/flexbox/flexbox.vue./src/App.vue总结这只是vue中写插件的方式之一，还有更多，例如：usingVue.directive(Name,[Define]),customdirectives，添加全局资源，比如vue-touch，可以看这篇文章我总结了添加Vue实例方法的方法，将它们添加到Vue.prototype中。添加全局方法或属性，例如：vue-element。一个库，它提供自己的API，同时提供上述一个或多个功能，例如vue-router。本文案例仅以最简单的方式讲解如何配置插件，旨在帮助大家尽快上手。如果觉得有帮助，请打赏。