How to solve the problem of "Attribute v-xxx is not allowed here" when phpStorm uses vue

The following tutorial column will introduce to you how to solve the problem of "Attribute v-xxx is not allowed here" when using vue in phpStorm. I hope it will be helpful to friends who need it!

Solve the problem of "Attribute v-xxx is not allowed here" when using vue in phpStorm

The new versions of webStorm, phpStorm and other tools of the jetbrains family already support vue. There is no need to install the Vue.js plug-in yourself. The support for vue single file components is very good.

But when using vue by directly

<script><strong>introducing it in the html file, the IDE may not support vue's code prompt completion by default, and there will also be "Attribute v- xxx is not allowed here<br/>" Such a prompt is as shown below<code>&lt;strong&gt;&lt;br/&gt;Refer to the paragraph in the vue.js plug-in source code description of jetbrains: &lt;img src=&quot;https://img.php.cn/upload/image/673/237/748/1617268393795145.png&quot; title=&quot;1617268393795145.png&quot; alt=&quot;How to solve the problem of Attribute v-xxx is not allowed here when phpStorm uses vue&quot;/&gt;&lt;/script&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;&lt;/strong&gt;If you're using IntelliJ IDEA Ultimate, PhpStorm, PyCharm, or RubyMine, install Vue.js plugin in Preferences | Plugins - Install JetBrains plugins.&lt;/p&gt; &lt;blockquote&gt;Open your Vue project .&lt;ol&gt; &lt;li&gt;Make sure that you have Vue.js library files in your project (for example, in the node_modules folder)&lt;li&gt;.&lt;/li&gt; &lt;li&gt; &lt;strong&gt;&lt;/strong&gt;See above Item 3 means that the current IDE project needs to have vue library files, such as in the node_modules directory. &lt;/li&gt; We use the following two methods to achieve it: &lt;/ol&gt; &lt;/blockquote&gt; &lt;p&gt;1. Download the vue source file, suitable for those who do not have git, npm, vue-cli environment on this machine &lt;br&gt;&lt;/p&gt; Go to github to download Just put the vue source file in the project directory. (If you downloaded a zip, please unzip it first) &lt;blockquote&gt; &lt;strong&gt;2. Create a new vue-cli project, suitable for those who have npm and vue-cli environments on the machine. &lt;/strong&gt;&lt;br&gt;Create a new vue-cli project, for example ：&lt;p&gt;vue init webpack vue-cli-test&lt;strong&gt;, follow the prompts to create and &lt;/strong&gt;npm install&lt;br&gt;After completion, just open the newly created vue-cli project in the same ide window. &lt;code&gt;</code><code>No matter which method is used, the purpose is to have the vue library file in the current ide window, and then the problem is solved. The prompt that the v-xxx attribute is not supported is gone, v-for and the like The js code in the command also supports highlighting. </code></p> </blockquote> <p></p>(The so-called projects here only refer to multiple directories opened in the same window of phpStorm, as long as any of these directories contains node_modules containing vue, For example, my normal project here is <p>html-project<img src="https://img.php.cn/upload/image/141/370/535/1617268398219068.png" title="1617268398219068.png" alt="How to solve the problem of Attribute v-xxx is not allowed here when phpStorm uses vue">. In this project, vue is directly introduced and used in the html file through </p> <script><p>. There is another project currently included in phpStrom. <code>vue-cli-test is an empty project created by vue-cli using the webpack template. There is vue in <code>node_modules of this project. With this, <code>html-projectHTML files in the project support vue syntax prompts.)<code></script>

The above is the detailed content of How to solve the problem of "Attribute v-xxx is not allowed here" when phpStorm uses vue. For more information, please follow other related articles on the PHP Chinese website!