ホームページ > 記事 > ウェブフロントエンド > Webstorm での Vue の使用例の詳細な説明
今回はウェブストームでのvueの使用例について詳しく説明します。ウェブストームでvueを使用する際の注意点は何ですか?実際のケースを見てみましょう。
Premise
Vue の公式ドキュメントでは、初心者は最初に vue-cli を使用するのではなく、JQuery と同様の方法で vue を直接導入して学習することを推奨しています。以前に angular の cli をすでに扱っているため、cli から直接始めます。
ノードと npm がインストールされていると仮定します。
vue-cli をグローバルにインストールする
ターミナルでコマンドを実行します:
npm install --global vue-cli
vue-cli をグローバルにインストールします。次に、vue-cli を使用してプロジェクトを作成します:
vue init webpack my-project
これで完全なプロジェクトが完成し、その中にサンプル コンポーネントが含まれます。 実行します:
npm run dev
次に、ブラウザで http://localhost:8081/ にアクセスします。プロジェクトの実行状況を確認できます。
Webstorm に挑戦
Webstorm で vue プロジェクトを開いたとき、本当に見るに耐えられず vue を諦めそうになりましたが、それでも一貫した探究心を持ち続けなければなりません。問題に遭遇したら解決してください!
.vue タイプのファイル
まず、ファイルタイプから始める必要があります。現在のバージョンでは、.vue ファイルタイプが存在しないため、認識されたり、強調表示されたりすることはできません。乱雑になります。調べてみると、ファイルの種類に *.vue を追加すれば十分という意見もありましたが、追加するとさらにわかりにくくなります。
長い間 Google を検索した結果、webstorm の公式 Web サイトからのこの記事を見つけましたhttps://www.jetbrains.com/help/webstorm/vue-js.html。ウェブストームはすでに Vue をサポートしていますが、ローカルのウェブストームではこのオプションがまったく見つかりません。これはなぜですか?
調べてみると、ウェブストームのバージョンは 2018 バージョンで、私のウェブストームは 2017.2 であることがわかりました。したがって、最新バージョンに更新する必要があります。
はい、ウェブストーム設定をバックアップし、最新のウェブストームをダウンロードして更新します。ちなみに、アクティベーション コードを見つけました: http://hb5.s.osidea.cc:1017 (ホットなので個人的なテストに使用できます)。
案の定、インストール後、vueマークが見つかり、確かに新しいバージョンがサポートされています。
しかし、.vue ファイルの強調表示はまだ利用できないことがわかりました。ファイルのサポートをまだ追加する必要があるようです (前の操作中に削除したかどうかはわかりません):
設定 > エディター > ファイルの種類
プルダウンして vue.js テンプレートを選択し、クリックしますパターンでプラス記号をクリックし、*.vue と入力して、[OK] をクリックし、[適用] をクリックすると、ウェブストームの下に 進行状況バー が表示されます。これがいっぱいになると、.vue が通常の強調表示になります。
未使用のエクスポートデフォルト
vueコンポーネントのjsにエクスポートデフォルトがあります。マウスを上に移動すると、未使用のエクスポートデフォルトが表示されます。このエクスポートの具体的な用途はありません。これは JavaScript の構文のヒント です。 IDE の検査構成の構成で構成できます。
簡単な方法は、右下隅にある小さな頭をクリックして、検査を設定します。ポップアップ インターフェイスで、[JavaScript 》 [一般] を選択します。オプションを削除: 未使用のグローバル シンボル。次に「OK」をクリックすると、灰色のリマインダーが消えることがわかります。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
JS が URL パラメーターを取得し、JSON 形式で送信する POST 手順の詳細な説明
以上がWebstorm での Vue の使用例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。