在vue中配置flow类型检查

Posted 2020-11-08 雨水一盒

1、安装flow

　　npm install --save-dev flow-bin

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

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

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

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

4、在babel配置文件.babelrc中加入

 {"presets": ["flow"]}

5、创建flow配置文件

　　touch .flowconfig

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

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

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

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

[libs]

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

 

6、新建一个文件index.vue

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

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

7、输入npm run flow 执行类型检查