在vue中配置flow类型检查

时间：2022-08-15 03:22:05

flow中文文档：https://zhenyong.github.io/flowtype/docs/objects.html#_

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 执行类型检查

　　

相关文章