nmp add element-ui

main.js 

/*自定義element標籤名開始*/
import {Input,
    Button,
    Radio,
    RadioGroup,
    RadioButton,
    Checkbox,
    CheckboxButton,
    CheckboxGroup,
    Switch,
    Select,
    Tabs,
    TabPane,
    Form,
    FormItem,
    MessageBox} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
function _extend(base, clazz) {
    return {
        extends:base,
        mounted:function() {
            var el = this.$el;
            el.className = el.className + " " + clazz;
        }
    };
}

function _install(Vue, name, comp) {
    Vue.component(name, _extend(comp, name));
}

function _confirm(message, fok, fcancel) {
    MessageBox.confirm(message, '確認', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        if(fok) {
            fok();
        }
    }).catch(() => {
        if(fcancel) {
            fcancel();
        }
    });
}

const install = function(Vue, opts = {}) {
    _install(Vue, "hlvy-input", Input);
    _install(Vue, "hlvy-button", Button);
    _install(Vue, "hlvy-switch", Switch);
    _install(Vue, "hlvy-radio", Radio);
    _install(Vue, "hlvy-radio-group", RadioGroup);
    _install(Vue, "hlvy-form", Form);
    _install(Vue, "hlvy-form-item", FormItem);
    _install(Vue, "hlvy-tabs", Tabs);
    _install(Vue, "hlvy-tab-pane", TabPane);
    Vue.prototype.$confirm = _confirm;
};
Vue.use(install);
 

頁面使用

<template>
  <div class="hello">
  <hlvy-button>11</hlvy-button>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
 

效果