Vue mit TypeScript ohne Komponenten

Question

Ich stieß auf Probleme bei der Entwicklung von Anwendungen. Ich benutze Vue + Vuetify mit Typoskript, aber ich möchte keine SPA-Anwendung erstellen oder Webpack für die Arbeit mit .vue-Komponenten verwenden, ich muss mehrere Seiten erstellen, wo ich jedes Mal eine neue Vue-Instanz erstelle. Aber wenn ich schaffen zum Beispiel

import * as Vue from 'Vue'; 
import axios from 'axios'; 

<any>window.vue = new Vue({ 
    el: "#app", 
    data: { 
     drawer: true, 
     mini: false, 
     totalItems: 0, 
     items: [], 
     headers: [, 
      { 
       text: 'Dessert (100g serving)', 
       align: 'left', 
       sortable: false, 
       value: 'name' 
      }, 
      { text: 'Calories', value: 'calories' }, 
      { text: 'Fat (g)', value: 'fat' }, 
     ], 

    }, 
methods: { 

    getData() { 
     axios.get("http://exmaple1234.com/api/list") 
      .then((response) => { 
       this.$data["totalItems"] = 1; 
       this.$data["items"] = [ 
        { 
         value: false, 
         name: 'Frozen Yogurt', 
         calories: 159, 
         fat: 6.0, 
        } 
       ]; 
      }) 
    } 
}, 
mounted() { 
    this.$options.methods["getData"].call("getData"); 

}, 
}); 

Mein tsconfig.json

{ 
    "compilerOptions": { 
    "alwaysStrict": true, 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": true, 
    "sourceMap": false, 
    "target": "es5", 
    "moduleResolution": "node", 
    "allowSyntheticDefaultImports": true, 
    "lib": [ "es2017", "dom", "dom.iterable" ] 
    }, 
    "exclude": [ 
    "node_modules" 
    ], 
    "compileOnSave": true 
} 

Mit Typoskript kann ich nicht this.totalItems, this.items verwenden und ich kann nicht nennen this.getData() in mounted(), aber wenn ich im Browser meinen Code debugge, sehe ich, dass das Objekt "this" all diese Eigenschaften und Methoden hat.

Ich benutze Eigenschaft $ Daten ["Eigenschaft"] Name und $ options.methods ["Methodenname"], um damit zu arbeiten, aber ich verstehe, dass nicht der richtige Ansatz ist. Ich lese in Vue Dokumentation über ComponentOptions, die helfen, Schnittstelle oder Vue-Klasse-Komponente zu erstellen, aber alle diese Tools verwenden Komponenten, die ich vermeiden möchte.

Kann ich in diesem Fall vue + typescript verwenden? Ich würde mich über Tipps zu meiner Frage freuen

Answer 1

Ich habe eine Schnittstelle hinzugefügt, um alle Datenattribute und Methoden zu beschreiben. Fügen Sie this.getData();/this.$options.methods["getData"].call(this); hinzu und erstellen Sie eine neue Vue-Instanz.

import * as Vue from 'Vue'; 
import axios from 'axios'; 

interface AppInterface extends Vue { 
    drawer: boolean, 
    mini: boolean, 
    totalItems: number, 
    items: any, 
    headers: any, 
    getData(): void 
} 

var App = { 
    el: "#app", 
    data: { 
     drawer: true, 
     mini: false, 
     totalItems: 0, 
     items: [], 
     headers: [{ 
       text: 'Dessert (100g serving)', 
       align: 'left', 
       sortable: false, 
       value: 'name' 
      }, { 
       text: 'Calories', 
       value: 'calories' 
      }, { 
       text: 'Fat (g)', 
       value: 'fat' 
      } 
     ] 
    }, 
    methods: { 
     getData() { 
      axios 
       .get("http://exmaple1234.com/api/list") 
       .then((response) => { 
        this.$data["totalItems"] = 1; 
        this.$data["items"] = [ 
         { 
          value: false, 
          name: 'Frozen Yogurt', 
          calories: 159,  
          fat: 6.0 
         } 
        ]; 
       }) 
     } 
    }, 
    mounted() { 
     // or this.$options.methods["getData"].call(this); 
     this.getData(); 
    } 
} as Vue.ComponentOptions<AppInterface> 

// new vue instance 
new Vue(App);