【uni-app】在WebStrom中优雅的开发nvue

使用uni-app开发nvue页面或纯nvue项目时，在HBuilderX确实可以完美适配，但是也有很多同学会使用VSCode或WebStorm。

关于VSCode中如何优雅开发nvue，请参见这篇文章：vscode 优雅地开发纯 nvue 项目 - DCloud问答。

在WebStorm中其实也可以直接把*.nvue添加到Vue 模板的文件类型中，但是我试过发现Prettier对nvue的格式化跟vue有些不同，所以我参考上述文章中作者的方法，研究了一下如何在WebStorm中使用类似的方法，只需编辑vue文件，nvue文件就会自动生成。

安装File Watcher插件（一般都已经默认安装了，直接跳到第2步）

两种方式：
- 直接打开这个链接：File Watchers - IntelliJ IDEs Plugin | Marketplace (jetbrains.com)，点击Get。
- 打开 偏好设置 - 插件 - Marketplace，搜索file watchers，点击安装。
安装后，再次打开偏好设置，在左上角搜索框中输入file watchers，点击右侧区域中的加号，选择<custom>。
在弹出窗口中，按下图操作：

名称：随便起个名字

文件类型：选择Vue 模板

程序：
- macOS中比较简单，直接输入cp命令的路径：/bin/cp即可。
- Windows中我没有找到copy命令的路径，所以就写了一个copy.bat文件，内容如下：
```
copy /y %1 %2
```
  然后将该文件的路径写入此处，比如：D:\copy.bat
参数：
- macOS中：-f $FilePath$ $FileDir$/$FileNameWithoutExtension$.nvue
- Windows中：$FilePath$ $FileDir$\$FileNameWithoutExtension$.nvue
自动保存编辑的文件以触发观察程序：取消勾选

点击保存按钮。
配置保存时自动执行File Watcher

回到刚才的窗口，点击下方的 保存时的所有操作...

勾选上File Watcher

点击确定按钮。

至此，就可以在WebStorm中实现编辑vue文件自动生成nvue文件的效果了。