Webstorm での Vue の使用例の詳細な説明-jsチュートリアル-php.cn

Webstorm での Vue の使用例の詳細な説明

php中世界最好的语言

リリース： 2018-05-11 15:21:51

オリジナル

3661 人が閲覧しました

今回はウェブストームでの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 ファイルの強調表示はまだ利用できないことがわかりました。ファイルのサポートをまだ追加する必要があるようです (前の操作中に削除したかどうかはわかりません):