element-ui源码中大量出现了extend方法，想效仿一下却百试百错迫不得已只好向社区求助
加入目前有三个文件message.vue message.js main.js

message.vue//
<template>
    <div> {{msg}} </div>
</template>

export default {
    name: 'message',
    data() {
        return {
            show: true,
            msg: 'hello',
        }
    }
}

index.js//
import Vue from 'vue'
import message from './message.vue'

const message = Vue.extend()
const instance = new message();
instance.vm = instance.$mount();
instance.name = "pick"
instance.msg = "extends message"

export default instance

main.js//
import Vue from 'vue'
import message from './xxxx/index.js'
Vue.component(message.name, message)

控制台报错template or render function not defined. 我根据报错信息修改了index.js 依然报错，依次试验过传入render函数 el:'#app' template模板 还是报错 也试过mount方法挂载

const message = Vue.extend({
  render: function(createElement) {
    return createElement('h1', this.blogTitle)
  }
})

问题：1 是否跟脚手架安装时选择了only runtime有关

问题：2 message.vue中的name到底有什么用，除了写递归组件如果没有index.js这个文件显示声明了name值 直接Vue.component(message.name,message)根本没用，控制台输出message.name是undifined，而message.vue文件中明确的指定了name值

问题：3 我知道Vue.component注册组件的时候会自动调用Vue.extend方法，extend只是vue子类构造器，我试过把index.js删掉，直接在main.js中引入message.vue文件，在Vue.component('apple',message)是完全没问题的，为什么我加上index.js反而不好用了