【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

点击确定按钮。