vue安装|vue安装 flow - 2018-06-26 vue安装flow-2018-06-26

2018-06-26创建

flow 安装

npm install flow-bin --save-dev

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

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

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

【vue安装|vue安装 flow - 2018-06-26】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 */ // /**/

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