在 Vue.js 中使用 Flow.js答案

【问题标题】：Using Flow.js in Vue.js在 Vue.js 中使用 Flow.js
【发布时间】：2017-04-05 12:00:09
【问题描述】：

我正在尝试将 flow.js 与 vue.js 一起使用，但在 .vue 文件中运行时遇到了问题。

我跑了vue init webpack、npm install -g flow-bin，然后是npm install和npm run dev。

我能够在我的 .flowconfig 中忽略我的 node_modules 中的错误文件，但是当我尝试将 // @flow 添加到我的 src/main.js 文件的顶部时，我收到以下错误

src/main.js:3
  3: import App from './App';
                     ^^^^^^^ ./App. Required module not found

我尝试将// @flow 表示法添加到我的 src/App.vue 文件中，并且我尝试将 src/App.vue 添加到 .flowconfig 中的[include]，但我仍然收到错误。

我想避免存根 .vue 文件，因为如果您拥有 js 的大多数文件都无法使用它们，那么使用 flow 的意义不大。

有没有办法在 vue 中使用流？

【问题讨论】：

【解决方案1】：

您可能需要在 Webpack 解析配置中添加 .vue 作为扩展。

尝试将以下内容添加到webpack.config.js：

module.exports = {
  ...
  resolve: {
    extensions: [".js", ".json", ".vue"]
  }
};

如果这不起作用并且取决于您使用导入的内容，您可以尝试将脚本从.vue 文件中分离出来。使用src 属性引用外部文件，然后将独立脚本直接导入到您需要引用的脚本中。

例子：

foo.vue

<script src="./foo.js"></script>
<template>
  ...
</template>

bar.vue

<script>
  import Foo from './foo.js';
  // do something with the default export of foo.js
</script>
<template>
  ...
</template>

【讨论】：