Javascript 将Vue.JS项目转换为Nuxt.JS项目

我想从Vue.JS项目创建Nuxt.JS项目

Vue.js项目

您可以看到完整的Vue.JS项目。该项目使用npm包，它可以帮助使用Vue.js将web表单转换为对话

项目有3个文件：

index.html

index.js

myForm.js

代码：index.html

<style>
  html, body {
    height: 90%;
    width: 96%;
    background: #eee;
    margin: 10px auto;
  }
</style>
<div id="app"></div>

代码：myForm.js

import Vue from 'vue'
import myForm from './myForm';

new Vue({
  el: '#app',
  template: '<myForm />',
  components: {
    myForm
  }
})

import Vue from 'vue'
import { ConversationalForm } from 'conversational-form';

export default Vue.component('MyForm', {
  template: '<div class="myForm"></div>',
  styles: [`
    .myForm {
      position: relative;
      height: 100%;
      width: 100%;
    }
  `],
  methods: {
    setupForm: function () {
      const formFields = [
        {
          'tag': 'input',
          'type': 'text',
          'name': 'firstname',
          'cf-questions': 'What is your firstname?'
        },
        {
          'tag': 'input',
          'type': 'text',
          'name': 'lastname',
          'cf-questions': 'What is your lastname?'
        }
      ];

      this.cf = ConversationalForm.startTheConversation({
        options: {
          submitCallback: this.submitCallback,
          preventAutoFocus: true,
        },
        tags: formFields
      });
      this.$el.appendChild(this.cf.el);
    },
    submitCallback: function () {
      var formDataSerialized = this.cf.getFormData(true);
      console.log("Formdata, obj:", formDataSerialized);
      this.cf.addRobotChatResponse("You are done. Check the dev console for form data output.")
    }
  },
  mounted: function () {
    this.setupForm()
  },
});

代码：MyForm.vue

<template>
  <div id="app">
    <MyForm></MyForm>
  </div>
</template>

<script>
import MyForm from '~/components/MyForm.vue'

export default {
  components: {
    MyForm
  }
}
</script>

<style scoped>
  html, body {
    height: 90%;
    width: 96%;
    background: #eee;
    margin: 10px auto;
  }
</style>

<template>
  <div class="myForm"></div>
</template>

<script>
export default {
  mounted() {
    this.setupForm()
  },
  methods: {
    setupForm() {
      const formFields = [
        {
          'tag': 'input',
          'type': 'text',
          'name': 'firstname',
          'cf-questions': 'What is your firstname?'
        },
        {
          'tag': 'input',
          'type': 'text',
          'name': 'lastname',
          'cf-questions': 'What is your lastname?'
        }
      ];

      const { ConversationalForm } = require('conversational-form');

      this.cf = ConversationalForm.startTheConversation({
        options: {
          submitCallback: this.submitCallback,
          preventAutoFocus: true,
        },
        tags: formFields
      });
      this.$el.appendChild(this.cf.el);
    },
    submitCallback() {
      var formDataSerialized = this.cf.getFormData(true);
      console.log("Formdata, obj:", formDataSerialized);
      this.cf.addRobotChatResponse("You are done. Check the dev console for form data output.")
    }
  } 
}
</script>

<style scoped>
  .myForm {
    position: relative;
    height: 100%;
    width: 100%;
  }
</style>

导出默认值{
安装的（）{
这是setupForm（）
},
方法：{
setupForm（）{
const formFields=[
{
'标记'：'输入'，
“类型”：“文本”，
'name'：'firstname'，
“cf问题”：“你的名字是什么？”
},
{
'标记'：'输入'，
“类型”：“文本”，
'name'：'lastname'，
“cf问题”：“你姓什么？”
}
];
const{ConversationalForm}=require（'conversational-form'）；
this.cf=对话形式。开始对话({
选项：{
submitCallback:this.submitCallback，
自动对焦：对，
},
标签：formFields
});
此.$el.appendChild（此.cf.el）；
},
submitCallback（）{
var formDataSerialized=this.cf.getFormData（true）；
log（“Formdata，obj:，formDataSerialized”）；
this.cf.addRobotChatResponse（“完成了。检查开发控制台以获取表单数据输出。”）
}
} 
}
.我的表格{
位置：相对位置；
身高：100%；
宽度：100%；
}

运行Nuxt.JS项目时，我没有收到任何错误，但在浏览器窗口中，它不会显示与原始Vue.JS项目相同的结果

---

为什么我在代码转换过程中出错？谢谢

尝试在

~/components/myForm.vue

中用一个额外的div将

.myForm

包装起来。下面是一个示例

项目中有什么不同？只有两个框架中的一个项目不同。在Vue.Js中工作，而不是在Nuxt.Js中工作。若我纠正了Nuxt.Js中的做法，那个么项目必须工作，但在我的情况下不工作。我想我在转换过程中出错了，找不到它。