Как настроить Zurb Foundation в проекте VueJS TypeScript?

Question

Я пытаюсь включить Zurb Foundation v6.5.3 в проект VueJS на основе TypeScript, созданный с помощью @ Vue / CLI. Определения типов jQuery включены в проект. В следующем компоненте Foundation инициализируется командой $ (document) .foundation ().

<template>
  <div>
    <p>TEST</p>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import $ from 'jquery';

@Component({
  components: {},
  mounted: () => {
    $(document).foundation();
  },
})
export default class Layout extends Vue { }
</script>

Однако при компиляции проекта отображается следующее сообщение, которое не позволяет ему работать.

Свойство 'foundation' не существует для типа 'JQuery'.

Версия: машинопись 3.4.5, tslint 5.16.0

Кто-нибудь сталкивался с этой проблемой или нашел подходящий способ включить Foundation в проект VueJS TypeScript?

Answer 1

Оказывается, вам нужно добавить

import 'foundation-sites';

после

import $ from 'jquery';

, и он загрузит все модули Foundation.В качестве альтернативы можно инициализировать отдельные модули.

Если это сделано в App.vue, то все дочерние компоненты будут инициализированы Foundation.