Vue 打字稿示例答案

【问题标题】：Vue typescript exampleVue 打字稿示例
【发布时间】：2018-01-21 09:27:59
【问题描述】：

我正在尝试使用 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

如何使用 typescript 制作一个可以工作的 Vue 应用程序？

【问题讨论】：

data-main 属性应该指向一个包含 RequireJS 配置的文件。 requirejs({ paths: { 'vue': 'node_modules/vue-boilerplate/vue.js' } }) 之类的东西只是一个例子（我有一段时间没有使用 requirejs，但这是基本思想。
我不会从头开始创建这个。改用样板，例如vue-webpack-typescript 是个不错的选择，因为你可以用 vue-cli 安装它。
我建议使用新的 vue-cli。从 v3 开始，您可以选择使用 typescript！不需要更复杂的配置或样板。查看Vue CLI 3 Documentation

标签： typescript vue.js requirejs

【解决方案1】：

您将需要 vue-class-component 和 vue-property-decorator。只需使用带有 webpack4 和预配置 vue-typescript 的最新 babel 样板，例如 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>

【讨论】：