如何封装vue组件？

注意：如有不懂可留言，如果我看到尽量回复你！
可以使用npm进行下载使用（本篇文章并未讲解npm上传代码）
npm install ueui
或者
cnpm install ueui

目录结构

• ueui
  • components
    • UeButton
      • button.vue
      • index.js
  • lib
    • theme
      • button.css
      • index.js
  • index.js
  • package.json

components/UeButton/buttn.vue

利用props进行传参判断class样式
	- round 圆角
	- loading 加载 （ps：loading动态图标可自行添加class）
	- disabled 可以度
	- icon 可自定义添加icon
	- nativeType 按钮类型
	- size 按钮大小
	- type 
	  可选参数 primary success info warning danger

可利用插槽可填写按钮文字或者图标

<template>
  <button
    class="ue-button"
    :class="[{'ue-button-radius': round}, disabled || loading ? `${type}-disabled` : type, size, {'ue-button-disabled':disabled}]"
    :disabled="disabled || loading"
    :type="nativeType"
    @click="handlerClick">
    <i class="" v-if="loading">i>
    <i :class="icon" v-if="icon && !loading">i>
    <span v-if="$slots.default"><slot>slot>span>
  button>
template>

<script>
  export default {
    name: "UeButton",
    props: {
      round: Boolean,
      loading: Boolean,
      disabled: Boolean,
      type: {
        type: String,
        default: 'default'
      },
      icon: {
        type: String,
        default: ''
      },
      size: {
        type: String,
        default: ''
      },
      nativeType: {
        type: String,
        default: 'button'
      }
    },
    methods: {
      handlerClick(evt) {
        this.$emit('click', evt)
      }
    }
  }
script>

components/UeButton/index.js

注册button到vue中

import UeButton from './button';
// ...
/* istanbul ignore next */
UeButton.install = function(Vue) {
  Vue.component(UeButton.name, UeButton);
};

export default UeButton;

lib/theme/button.css

.ue-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 12px 20px;
  font-size: 14px;
  -webkit-transition: .1s;
  transition: all .1s;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
}

.ue-button + .ue-button {
  margin-left: 10px;
}

.ue-button-disabled {
  cursor: no-drop;
}

.ue-button-radius {
  border-radius: 30px;
}

.default {
  background-color: #fff;
  box-shadow: 0 0 3px #e3e3e3;
  border: 1px solid #ccc;
  color: #5d5d5d;
}

.default-disabled {
  background-color: rgba(161, 204, 237, 0.2);
  box-shadow: 0 0 3px #e3e3e3;
  border: 1px solid rgba(161, 204, 237, 0.58);
  color: rgba(161, 204, 237, 0.81);
}

.primary {
  background-color: #31b0ff;
  box-shadow: 0 0 3px #96d7ff;
  border: 1px solid transparent;
  color: #fff;
}

.primary-disabled {
  background-color: #51ccff;
  box-shadow: 0 0 3px #96d7ff;
  border: 1px solid transparent;
  color: #fff;
}

.success {
  background-color: #00e200;
  box-shadow: 0 0 3px #9bffa2;
  border: 1px solid transparent;
  color: #fff;
}

.success-disabled {
  background-color: #63e25d;
  box-shadow: 0 0 3px #9bffa2;
  border: 1px solid transparent;
  color: #fff;
}

.info {
  background-color: #acb4c0;
  box-shadow: 0 0 3px #c1cad7;
  border: 1px solid transparent;
  color: #fff;
}

.info-disabled {
  background-color: #bbc2cd;
  box-shadow: 0 0 3px #c1cad7;
  border: 1px solid transparent;
  color: #fff;
}

.warning {
  background-color: #ffaa21;
  box-shadow: 0 0 3px #ffba93;
  border: 1px solid transparent;
  color: #fff;
}

.warning-disabled {
  background-color: #ffb751;
  box-shadow: 0 0 3px #ffba93;
  border: 1px solid transparent;
  color: #fff;
}

.danger {
  background-color: #ff3c42;
  box-shadow: 0 0 3px #ff6269;
  border: 1px solid transparent;
  color: #fff;
}

.danger-disabled {
  background-color: #ff5f62;
  box-shadow: 0 0 3px #ff6269;
  border: 1px solid transparent;
  color: #fff;
}

.default:hover {
  background-color: rgba(161, 204, 237, 0.3);
  color: #4aa6de;
  border: 1px solid #4aa6de;
}

.default:active {
  background-color: rgba(161, 204, 237, 0.61);
}

.primary:hover {
  background-color: #51ccff;
}

.primary:active {
  background-color: #8ae0ff;
}

.success:hover {
  background-color: #63e25d;
}

.success:active {
  background-color: #a1e29a;
}

.info:hover {
  background-color: #bbc2cd;
}

.info:active {
  background-color: #ced7e3;
}

.warning:hover {
  background-color: #ffb751;
}

.warning:active {
  background-color: #ffc38b;
}

.danger:hover {
  background-color: #ff5f62;
}

.danger:active {
  background-color: #ff8b8e;
}

.mini {
  padding: 5px 15px;
}

.small {
  padding: 8px 20px;
}

lib/theme/index.js

这样写可实现按需引入组件

import "./button.css";

index.js

全部引入方法 按照下方同样的方式引入组件

import UeButton from './components/UeButton';
// ...
const components = [
  UeButton
];

const install = function(Vue) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  version: '1.0.0',
  install
}

package.json

使用npm生成json文件
  - npm init

{
  "name": "ueui",
  "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "joker",
  "license": "ISC",
  "__npminstall_done": "Tue Aug 04 2020 18:32:01 GMT+0800 (中国标准时间)",
  "_from": "[email protected]",
  "_resolved": "https://registry.npm.taobao.org/ueui/download/ueui-1.0.1.tgz"
}