如何修復無法掛載組件：vue 中未定義模板或渲染函數

Question

我正在嘗試在 vue 中編寫一個組件，但我遇到了問題：無法掛載組件：未定義模板或渲染函數。 我嘗試了一些解決方案，例如在導入組件時添加默認值，但這些都不起作用。 我的組件代碼， 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，h1 被渲染，但拆分窗格沒有。

<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>

在代碼沙盒中完成項目

Answer 1

您不能將 HTML 模板作為 JS 文件進行評論。 您應該使用注釋作為簡單的 HTML 文件，如下所示：

 <!-- 
 - @file
 - @author JackZhoumine <jackzhoumine@gmail.com>
 -->

代替

/**
* @file 
* @author JackZhoumine <jackzhoumine@gmail.com>
*/

就在<script>內部可以使用//或/**/因為你正在編寫 js sintax。