如何在 VueJS TypeScript 项目中配置 Zurb Foundation？答案

【问题标题】：How to configure Zurb Foundation in a VueJS TypeScript project?如何在 VueJS TypeScript 项目中配置 Zurb Foundation？
【发布时间】：2019-10-13 10:06:59
【问题描述】：

我正在尝试将 Zurb Foundation v6.5.3 合并到使用 @Vue/CLI 创建的基于 TypeScript 的 VueJS 项目中。 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>

但是，编译项目时会显示以下消息，导致项目无法运行。

类型“JQuery”上不存在属性“foundation”。

版本：typescript 3.4.5，tslint 5.16.0

有没有人遇到过这个问题或找到了将 Foundation 整合到 VueJS TypeScript 项目中的正确方法？

【问题讨论】：

标签： typescript vue.js zurb-foundation

【解决方案1】：

原来需要添加

import 'foundation-sites';

之后

import $ from 'jquery';

它会加载所有的 Foundation 模块。或者，可以初始化各个模块。

如果这是在 App.vue 中完成的，那么所有子组件都将初始化 Foundation。

【讨论】：