Vue 打字稿示例

Question

我正在嘗試使用 Vue 和 typescript 創建一個 HelloWorld 應用程序

索引.html

<script data-main="app.js" src="node_modules/requirejs/require.js"></script>

<div id="app">{{text}}</div>

應用程序

import Vue from 'vue'

var app = new Vue({
    el:"#app"
    ,data: {
        text: "hello there"
    }
});

包.json

{
  "name": "vue-example"
  ,"autohor": "nagyzsolthun"
  ,"dependencies": {
    "vue": "latest"
  }
  ,"devDependencies": {
    "typescript": "latest"
    ,"requirejs": "latest"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5"
    ,"module": "amd"
    ,"moduleResolution": "node"
    ,"allowSyntheticDefaultImports": true
    ,"experimentalDecorators": true
    ,"lib": [ "es2015", "dom" ]
  }
}

打開 index-html 時（編譯 app.ts 后）我看到以下錯誤：

GET file:///home/zsolt/prog/vue-boilerplate/vue.js net::ERR_FILE_NOT_FOUND

如何使用打字稿制作可工作的 Vue 應用程序？

Answer 1

您將需要 vue-class-component 和 vue-property-decorator。 只需使用帶有 webpack4 的最新 babel 樣板和預配置的 vue-typescript，如Darvin HTML Webpack Boilerplate

<script lang="ts">
  import {Component, Prop} from 'vue-property-decorator';
  import Vue from 'vue';
  import { ... } from '@js/models/models.d.ts';

  @Component
  export default class myNewClass extends Vue {
    @Prop() someVar1: string;

    myVar: myErrorMsg | null = null;

    mounted() {
      ...
    }

    method1() {
      ...
    }
  }
</script>