引入组件后报错

[Hadboon]

这个错误该怎么解决

[Z-J-wang]

感谢您的反馈！

这个问题因为vue版本不一致导致的，你的项目采用的版本应该是vue2.x。而render-juypter-notebook-vue插件采用的是vue3.x。 对于这个问题，render-juypter-notebook-vue在最新版本中完善了直接引用源码的功能。

请更新最新的render-juypter-notebook-vue版本，然后如下使用：

<template>
  <div class="home">
    <RenderJupyterNotebook :notebook="notebook" />
  </div>
</template>

<script>
import RenderJupyterNotebook from "render-jupyter-notebook-vue/src/components/RenderJupyterNotebook.vue"; // vue 2.x 写法
import example from "../assets/OutputExamples.json";

export default {
  name: "HomeView",
  components: { RenderJupyterNotebook },
  data() {
    return {
      notebook: example,
    };
  },
};
</script>

[Hadboon]

我尝试了第二种调用方法，没有问题，很棒，要是把编辑功能也加入进来就更厉害了。

[Z-J-wang]

@Hadboon JupyterLab本身就是个notebook编辑器。所以如果需要编辑功能，推荐直接将Jupyterlab部署到服务器，然后通过iframe内嵌的形式实现。