phpStorm が vue を使用するときに「ここでは属性 v-xxx は許可されません」という問題を解決する方法

次のチュートリアルコラムでは、phpStorm で vue を使用する際に「ここでは属性 v-xxx は使用できません」という問題を解決する方法を紹介します。

# phpStorm で vue を使用するときに「属性 v-xxx はここでは許可されません」という問題を解決する

webStorm、phpStorm、および Jetbrains ファミリーのその他のツールの新しいバージョンはすでに vue をサポートしています。Vue.js プラグインを自分でインストールする必要はありません。vue の単一ファイル コンポーネントのサポートは非​​常に優れています。

しかし、vue を直接

<script><p>HTML ファイルに導入して使用する場合、IDE はデフォルトで vue のコード プロンプト補完をサポートしていない可能性があり、また「<strong>」も表示されます。属性 v-xxx はここでは許可されません" このようなプロンプトは以下に示すとおりです。<br/><code><strong>vue.js プラグインのソース コードの説明の段落を参照してください。 Jetbrains: <br/><img src="https://img.php.cn/upload/image/673/237/748/1617268393795145.png" title="1617268393795145.png" alt="phpStorm が vue を使用するときに「ここでは属性 v-xxx は許可されません」という問題を解決する方法"/><p><strong>IntelliJ IDEA Ultimate、PhpStorm、PyCharm、または RubyMine を使用している場合は、[設定] | [プラグイン] - [JetBrains プラグインのインストール] で Vue.js プラグインをインストールします。 Vue プロジェクトを開きます。<blockquote><ol>プロジェクト内 (たとえば、node_modules フォルダー内) に Vue.js ライブラリ ファイルがあることを確認してください。<li>.<li><li>上記の項目 3 を参照してください。現在の IDE プロジェクトには、node_modules ディレクトリなどに vue ライブラリ ファイルが必要であることを意味します。 <strong> これを実現するには、次の 2 つの方法を使用します: 1. このマシンに git、npm、vue-cli 環境がない人に適した vue ソース ファイルをダウンロードします <p> github にアクセスしてダウンロードします。vue ソース ファイルをプロジェクト ディレクトリに置くだけです。 (zip をダウンロードした場合は、最初に解凍してください) <br/>2. マシン上に npm および vue-cli 環境がある人に適した、新しい vue-cli プロジェクトを作成します。新しい vue-cli プロジェクト (例:<blockquote>vue init webpack vue-cli-test<strong>)。プロンプトに従って作成し、npm install<br/>完了したら、新しく作成した vue-cli を開きます。同じ IDE ウィンドウ内でプロジェクトを実行します。 <p><strong>どの方法を使用しても、目的は現在の IDE ウィンドウに vue ライブラリ ファイルを表示することであり、その後、問題は解決されます。v-xxx 属性がサポートされていないというプロンプトが表示されます。 got、v-for など コマンド内の js コードは強調表示もサポートしています。 <br/><code><code>(ここでのいわゆるプロジェクトとは、phpStorm の同じウィンドウで開かれた複数のディレクトリのみを指します。ただし、これらのディレクトリのいずれかに vue を含むノードモジュールが含まれている必要があります。たとえば、私の通常のプロジェクトは html-project です。このプロジェクトでは、vue が <p><script> を通じて HTML ファイルに直接導入され、使用されています。現在 phpStrom には別のプロジェクトが含まれています。 <p>vue-cli-test<img src="https://img.php.cn/upload/image/141/370/535/1617268398219068.png" title="1617268398219068.png" alt="phpStorm が vue を使用するときに「ここでは属性 v-xxx は許可されません」という問題を解決する方法"/> は webpack テンプレートを使用して vue-cli で作成された空のプロジェクトです。このプロジェクトの node_modules<p> に vue があります。これで、<code>html-projectプロジェクト内のHTMLファイルはvue構文プロンプトをサポートしています。)<code></script>

以上がphpStorm が vue を使用するときに「ここでは属性 v-xxx は許可されません」という問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。