When developing nvue pages or pure nvue projects using uni-app, HBuilderX works perfectly, but there are many students who will use VSCode or WebStorm.

For more information on how to gracefully develop nvue in VSCode, see this article: gracefully develop pure nvue projects in VSCode – DCloud q&a.

I looked at how to use a similar approach in WebStorm, referring to the author’s approach in the above article.

  1. Install the File Watcher plugin (usually installed by default, skip to Step 2)

    Two ways:

    • Directly open the link: File Watchers – IntelliJ IDEs Plugin | Marketplace (jetbrains.com), click on the Get.

    • Go to Preferences – Plugins – Marketplace, search for File Watchers, and click Install.

  2. Once installed, open preferences again, type File Watchers in the search box in the upper left corner, click the plus sign in the right field, and select < Custom >.

  3. In the pop-up window, click the following image:

    Name: Any name

    File type: Select a Vue template

    Application:

    • In macOS, enter the path of cp command directly:/bin/cpCan.
    • In Windows, I could not find the path of copy command, so I wrote a copy. Bat file with the following contents: 
      copy /y %1 %2
Copy the code

      Then write the path of the file here, for example: D:\copy.bat

    Parameters:

    • MacOS in:-f $FilePath$ $FileDir$/$FileNameWithoutExtension$.nvue
    • Windows:$FilePath$ $FileDir$\$FileNameWithoutExtension$.nvue

At this point, you can automatically generate nvUE files by editing vue files in WebStorm.