Vue自定义组件二

接上篇Vue自定义组件

我用vue写页页的时候有个习惯：就是js、css跟vue页面分开，这样vue文件看上去比较干净。但是按照这个习惯封装组件的时候就遇到了一个问题。先看代码：

<template>
  <div>
    <el-tabs>
      <el-tab-pane>
        <router-view></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script src="pane.js"> 
</script>

pane.js部分内容：

export default {
  name: 'mainPane',
  ......
}

现在的问题是：页面加载的时候自已封装的组件显示不出来。

浏览器中提示如下的信息：

runtime-core.esm-bundler.js:6589 [Vue warn]: Component is missing template or render function. at <Anonymous style= Object >

at <ElMain>

at <ElContainer>

at <ElContainer class="home_container" >

at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >

at <RouterView>

at <App>

对该错误的解释是：

但是我封装的组件模板是正确的，组件也有导出，在其他的页面中也有注册。浏览器就是不能正确解析。郁闷.......

最后只能偿试严格按照vue的格式了--将vue跟js放在一个文件中，不再分开来写。

如下：

<template>
  <div>
    <el-tabs>
      <el-tab-pane>
        <router-view></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'mainPane',
  ........
};
</script>

<style scoped>
</style>

引用页的注册：

引用：

：