javascript - 如何修复无法安装组件: template or render function not defined in 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已渲染，但分割 Pane 未渲染。

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

完成项目codesandbox

Answer 1

您无法将 HTML 模板注释为 JS 文件。您应该将注释用作简单的 HTML 文件，如下所示:

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

而不是

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

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