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

Question

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

Vue.js 项目

你可以看到完整的 Vue.JS 项目here。该项目使用 npm 包vue-conversational-form，它可以帮助使用 Vue.js 将 Web 表单转换为对话。

项目有 3 个文件：

1. index.html
2. index.js
3. myForm.js

代码： index.html

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

代码： index.js

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

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

代码： myForm.js

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()
  },
});

Nuxt.js 项目

现在您可以在这里看到我尝试将这个 Vue.Js 项目从 codesandbox 转换为 Nuxt.js 项目。

项目有 2 个文件：

1. index.vue（页面）
2. MyForm.vue（组件）

代码： index.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>

代码： MyForm.vue

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

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

为什么我在代码转换过程中遇到错误？谢谢！

Answer 1

尝试使用额外的 div 将 .myForm 包裹在 ~/components/MyForm.vue 中。这是一个例子https://codesandbox.io/embed/codesandbox-nuxt-conversational-form-oh9y4

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