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({
  head () {
    return {
      title: 'test'
    }
  }
})
export class Test extends Vue {}

如何将Vue插件包含在Vue TypeScript的模板中？

2 个答案: