javascript - how to fix Failed to mount component: template or render function not defined in vue

Question

I'm trying a write a component in vue,but I stuck in the problem: Failed to mount component: template or render function not defined. I tried some resolutions,such as add defalut when import component,but these dont work. My component code，<code>split-pane.vue

<template>
  <div class="split-pane-wrapper">
    <div class="pane pane-left"
         :style="{width:leftOffsetPre}">
      <button @click="change">改变</button>
    </div>
    <div class="pane-trigger-con"
         :style="{left:triggerLeft,width:`${triggerWidth}px`}"></div>
    <div class="pane pane-right"
         :style="{left:leftOffsetPre}"> right</div>
  </div>
</template>

<script>
export default {
  name: 'SplitPane',
  props: {
    triggerWidth: {
      type: Number,
      default: 8
    }
  },
  data () {
    return {
      leftOffset: 0.3,
    };
  },
  computed: {
    leftOffsetPre () {
      return `${this.leftOffset * 100}%`;
    },
    triggerLeft () {
      const left = `calc(${this.leftOffset * 100}% - ${this.triggerWidth / 2}px)`;
      return left;
    }
  },
  methods: {
    change () {
      this.leftOffset -= 0.02;
    }
  }
};
</script>

<style lang="less" scoped>
.split-pane-wrapper {
  height: 100%;
  background-color: red;
  position: relative;
  .pane {
    position: absolute;
    top: 0;
    height: 100%;
    &-left {
      width: 30%;
      background-color: antiquewhite;
    }
    &-right {
      right: 0;
      bottom: 0;
      left: 30%;
      background-color: blue;
    }
    &-trigger-con {
      height: 100%;
      background-color: red;
      position: absolute;
      top: 0;
      z-index: 10;
    }
  }
}
</style>

App.vue,the h1 is rendered,but the split-pane not.

<template>
  <div id="app">
    <h1>hello SplitPane</h1>
    <split-pane/>
  </div>
</template>

<script>
import SplitPane from "./components/split-pane";
export default {
  name: "App",
  components: {
    SplitPane
  }
};
</script>

complete project in codesandbox

标签： javascriptvue.jsvue-componentvuex

Answer 1

您不能将 HTML 模板作为 JS 文件进行评论。您应该使用注释作为简单的 HTML 文件，如下所示：

 <!-- 
 - @file
 - @author JackZhoumine <[e-mail]>
 -->

代替

/**
* @file 
* @author JackZhoumine <[e-mail]>
*/

只是在里面<script>可以使用//或者/**/因为你正在编写 js sintax。