为何作这个?这是一个很值得思考的问题:
= =首先目前vue.js成熟的框架已有不少,各类框架之间的特性、风格、完善度也良莠不齐,有时候作项目选框架就成了一个难以抉择的问题,由于一个项目要通过不少版本的迭代、不少需求的变动和增长,有时候甚至是无限期的更新需求,那么假如一开始你选择了一个框架,随着需求的增多和UI设计风格的多样化,开源的框架不能知足大多数场景的需求是必然的,这时候就须要考虑本身去封装适合本身的甚至通用的组件了。vue
先不用考虑发布以后的动做,将组件包和展现页面放在一个项目下便可git
创建一个专门的文件夹存放咱们的组件库,如下目录形式仅供参考:github
packagessegmentfault
|__button框架
|__src |__button.vue |__index.js
|__index.js (暴露全部组件)ui
<template> <button :disabled="disabled" :class="[prefixCls,prefixCls +'__' + type,prefixCls +'__' + type + '--' + size, {'is-plain': plain, 'is-disabled': disabled, 'is-round': round}]" > <i v-if="icon !== ''" :class="icon"></i> <span :class="[prefixCls + '__loading',type]" v-if="loading"></span> <slot></slot> </button> </template> <script> const prefixCls = 'wui__button'; export default{ name: 'WButton', props: { type: { type: String, default: 'default' }, size: { type: String, default: 'default' }, icon: { type: String, default: '' }, plain: Boolean, disabled: Boolean, round: Boolean, loading: Boolean }, data () { return { prefixCls:prefixCls, } } } </script>
import WButton from './button/index.js'; const components = [ WButton ] const install = function(Vue) { if (install.installed) return components.map(component => Vue.component(component.name, component)) } if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } export default { install, WButton }
import Button from './src/button.vue'; Button.install = function (Vue) { Vue.component(Button.name, Button); }; export default Button;
import WUI from '../packages/index' Vue.use(WUI)
至此一个button组件就写好了,而且支持按需引用和全局引用方式,自由灵活,固然定制的参数也知识参考当前主流框架的形式,本篇只是一个框架的起点,至关于万里长征的第一步,存在着许多不足,但愿各位看官指正。spa
下一篇设计
从零开始构建本身的vue组件库之————message组件
传送门code
button组件源码传送门