Question

我试图用Vue和typescript

创建一个HelloWorld应用程序

的index.html

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

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

app.ts

import Vue from 'vue'

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

的package.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。只需将最新的babel样板与webpack4和预先配置的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>

Vue打字稿示例

1 个答案: