vue安装 flow - 2018-06-26

• 2018-06-26创建

flow 安装

npm install flow-bin --save-dev

安装完成后在package.json中加入下面的脚本：

"scripts": {
    "flow":"flow check"
  }

同时还要安装babel编译器，将flow的类型检查代码从代码中剥离，转变成正常的js代码

npm install babel-cli babel-preset-flow --save-dev

在babel配置文件.babelrc中加入

{
  // "presets": ["flow"]

  {
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2",
    "flow"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
  }

}

flow 配置

新建 .flowconfig 文件:

[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]

[libs]

[options]
module.file_ext=.vue 
module.file_ext=.js

监测运行

example

新建一个文件 abc.js

// @flow 
let a:number = '3';

// @flow 或者 /* @flow */ 告诉flow检查这个文件

运行 npm run flow 执行类型检查

在vue单文件组件使用flow需要额外配置

• 1、在.flowconfig文件的[options]中配置.vue文件扩展名

module.file_ext=.vue

• 2、在.vue文件中需注释掉template script styled标签

/* @flow
<template>
  <div>
  </div>
</template>
*/
// <script>
  let a:string = 2;
  console.log(a);
  export  default {
    data(){
      return {
       
      }
    }
  }
// </script>
/*
<style scoped>
</style>
*/

注意：
1、 在注释template和style时使用 /**/ 注释，在template和style内部不能再使用 /* */ 这种注释，这个不是flow不识别，本来就不应改 /**/中嵌套 /**/ ,应该在 /**/ 中采用 // 注释风格
2、如果不想在.vue中使用注释的方法，可以在ide中安装flow，但是不能使用npm run flow来检查了。