import Vue from 'vue';
import { typeIs } from '_helpers';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

export function VueInit(render, selector, options) {
    if (!document.querySelector(selector)) {
        return null;
    }

    const setup = {
        render: (h) => h(render),
    };

    if (options) {
        Object.assign(
            setup,
            options
        );
    }

    return new Vue(setup).$mount(selector);
}

export function VueGlobalComponents(components) {
    for (const item of components) {
        if (typeIs(item, 'array') && item.length) {
            const [category, component] = item;
            Vue.component(component, require(`_components/${category}/${component}`).default);
        }
    }
}

export default Vue;

import Vue, { VueInit, VueGlobalComponents } from '_root/main';
import router from '_page/router';

VueGlobalComponents([
    ['grid', 'e-layout'],
    // @{Add:VueGlobalComponents}
]);

window.$app = VueInit(require('_page/views/App.vue').default, '#app-examples', { router });

<template>
    <div>
        <el-select v-model="value" placeholder="Select">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
        </el-select>
    </div>
</template>

<script>
import Code from '_page/components/Code';

export default {
    name: 'Home',

    components: {
        Code,
    },

    data() {
        return {
            options: [
                {
                    value: 'Option1',
                    label: 'Option1',
                }
            ],
            value: '',
        };
    },
};
</script>