typescript - 如何将 Vue 插件包含到 Vue TypeScript 的模板中？

Question

如何将 Vue 插件包含到 Vue TypeScript 的模板中，例如vue-webpack-typescript？

例如，vue-meta。

我已经添加到./src/main.ts这个：

import * as Meta from 'vue-meta';

Vue.use(Meta, {
  keyName: 'head', 
  attribute: 'data-vue-meta', 
  ssrAttribute: 'data-vue-meta-ssr', 
  tagIDKeyName: 'vmid'
});

并将其添加到./src/components/home/home.ts组件中：

export class HomeComponent extends Vue {

  static head() {
    return {
      title: 'Test'
    }
  }

}

但这不起作用，不要显示超过书面标题..

Answer 1

我想这与包含 Vue 插件无关。如果您正确设置 typescript 编译器以使用 vue，则该组件将使用任何插件。所以我想这将是您使用类样式组件的问题。

根据 Vue 的官方示例，您需要vue-class-component让 Vue 识别类组件。 https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components

@Component
export class MyMixin extends Vue {
  mixinValue = 'Hello'
}

祝你好运！

Answer 2

也许你应该在 Component 装饰器中这样写：

@Component({
  head () {
    return {
      title: 'test'
    }
  }
})
export class Test extends Vue {}