javascript — преобразование проекта Vue.JS в проект Nuxt.JS

Конвертировать проект Vue.JS в проект Nuxt.JS

Я хочу создать проект Nuxt.JS из проекта Vue.JS.

Проект Vue.js

Вы можете увидеть полный проект Vue.JS здесь . В этом проекте используется пакет vue-диалоговая форма пакета npm, который может превратить веб-формы в диалоги с использованием Vue.js.

Проект имеет 3 файла:

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

Код: index.html

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

Код: index.js

 import Vue from 'vue' import myForm from './myForm'; new Vue({ el: '#app', template: '{amp}lt;myForm /{amp}gt;', components: { myForm } }) 

Код: myForm.js

 import Vue from 'vue' import { ConversationalForm } from 'conversational-form'; export default Vue.component('MyForm', { template: '{amp}lt;div class="myForm"{amp}gt;{amp}lt;/div{amp}gt;', 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 в проект Nuxt.js из codesandbox .

Проект имеет 2 файла:

  1. index.vue (страница)
  2. MyForm.vue (компонент)

Код: index.vue

 {amp}lt;template{amp}gt; {amp}lt;div id="app"{amp}gt; {amp}lt;MyForm{amp}gt;{amp}lt;/MyForm{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; import MyForm from '~/components/MyForm.vue' export default { components: { MyForm } } {amp}lt;/script{amp}gt; {amp}lt;style scoped{amp}gt; html, body { height: 90%; width: 96%; background: #eee; margin: 10px auto; } {amp}lt;/style{amp}gt; 

Код: MyForm.vue

 {amp}lt;template{amp}gt; {amp}lt;div class="myForm"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; 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.") } } } {amp}lt;/script{amp}gt; {amp}lt;style scoped{amp}gt; .myForm { position: relative; height: 100%; width: 100%; } {amp}lt;/style{amp}gt; 

Я не получаю никаких ошибок при запуске проекта Nuxt.JS, но в окне браузера он не отображает тот же результат, что и исходный проект Vue.JS.

Почему я получаю ошибки в процессе преобразования кода? Спасибо!

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector