Vue.js

1. お使いのコンピューターにNode.js(英語)がインストールされていることを確認してください。

2. プラグインのページでVue.jsバンドルプラグインが有効になっていることを確認してください。詳細については、プラグインを管理するを参照してください。

アプリケーションを作成するには

1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面で新規プロジェクトの作成をクリックします。新規プロジェクトの作成ダイアログが開きます。

2. 左側のペインで、Vue.jsを選択します。

3. 右側のペインで：

   1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

   2. Node インタープリターフィールドに、使用するNode.jsインタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

   3. Vue CLIリストから、npx --package @vue / cli vueを選択します。

      または、npmバージョン5.1以前の場合、ターミナル Alt+F12で npm install --g @vue/cli を実行して、@vue/cli パッケージを自分でインストールします。アプリケーションを作成するときに、@vue/cli パッケージが保存されているフォルダーを選択します。

   4. babel(英語)とESLint(英語)でアプリケーションをブートストラップするには、デフォルトのプロジェクト設定を使用するチェックボックスを選択します。

4. 作成をクリックすると、WebStormは必要なすべての設定ファイルを含むVue.js固有のプロジェクトを生成し、必要な依存関係をダウンロードします。実行ツールウィンドウで進行状況を確認できます。

空のWebStormプロジェクトを作成するには

1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面で新規プロジェクトの作成をクリックします。新規プロジェクトの作成ダイアログが開きます。

2. 左側のペインで、空のプロジェクトを選択します。

3. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

4. 作成をクリックすると、WebStormが作成され、空のプロジェクトが開きます。

空のプロジェクトにVue.jsをインストールするには

1. Vue.jsを使用する空のプロジェクトを開きます。

2. 埋め込みターミナル（Alt+F12）に次のように入力します。

   npm install vue

既にあなたのマシンにあるアプリケーションソースを開くには

• ようこそ画面で開くをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションソースをチェックアウトするには

1. ようこそ画面でバージョン管理から取得をクリックするか、メインメニューからVCS | バージョン管理から取得を選択します。

2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

依存関係をダウンロードするには

• ポップアップで実行 'npm install'をクリックしてください。

  

Vue.jsコンポーネントを作成するには

• プロジェクトツールウィンドウで、新しいコンポーネントの親フォルダーを選択し、リストからVue コンポーネントを選択します。

  

コンポーネントを抽出するには

1. 抽出してコンポーネント抽出を呼び出すテンプレートフラグメントを選択します。

   • インテンションアクションを使用するには、Alt+Enterを押してから、リストからVue コンポーネントの抽出を選択します。

   • リファクタリングを使用するには、メインメニューまたは選択範囲のコンテキストメニューからリファクタリング | 抽出 | Vue コンポーネントの抽出を選択します。

2. 新しいコンポーネントの名前を入力します。この名前が既に使用されているか無効である場合、WebStormは警告を表示します。それ以外の場合は、新しい単一ファイルコンポーネントが作成され、親コンポーネントにインポートされます。

   

コードを完成させる

• デフォルトでは、WebStormは script ブロック内のECMAScript 6および style ブロック内のCSSにコード補完を提供します。

  

• template タグ、コード補完 Ctrl+Space 内、およびVue.jsコンポーネントと属性の定義 Ctrl+B へのナビゲーションが利用可能です。

  

• WebStormは、Vue.jsのプロパティー、data オブジェクトのプロパティー、計算されたプロパティー、およびメソッドの補完も提案します。

  

• WebStormは、ライブラリーコンポーネントおよびプロジェクトで定義されたコンポーネントからのスロット(英語)名の補完を提供します。

  プロジェクトに名前付きスロットを持つコンポーネントが含まれている場合、WebStormは template タグの v-slot ディレクティブにこれらの名前の提案を表示します。

  

  Vuetify(英語)、Quasar(英語)、またはBootstrapVue(英語)を使用している場合、スロット名にコード補完も使用できます。

  

• コンポーネントが複数のファイル(英語)で定義されている場合(英語)、WebStormはコンポーネントのパーツ間のリンクを認識し、プロパティー、データ、およびメソッドに適切なコード補完を提供します。

  例：コンポーネントの一部が src 属性を介して vue ファイルにリンクされている個別のJavaScriptファイルとスタイリングファイルで定義されている場合、JavaScriptで定義されたプロパティーはメソッドのようにテンプレートで適切に完了します。

  

• コンポーネントの template プロパティーのテンプレートリテラル内のテンプレートは、このコードが template タグ内にあるかのように完了します。

  

  補完は、テンプレートが別のHTMLファイルで定義され、template プロパティーにリンクされている場合にも利用できます。

typescript-tslint-pluginをインストールして構成する

1. 埋め込みターミナル（Alt+F12）に次のように入力します。

   npm install --save-dev typescript-tslint-plugin

2. tsconfig.json ファイルの plugins プロパティーで、次のように入力します。

   { "compilerOptions": { "plugins": [{"name": "typescript-tslint-plugin"}] } }

3. typescript-tslint-pluginを使用している場合、TSLintはTypeScript 言語サービス(英語)を介して実行されているため、WebStormとのTSLint統合を無効にして、エラー報告の重複を回避できます。

   そのためには、設定/環境設定ダイアログ（Ctrl+Alt+S）を開き、言語とフレームワーク | TyprScript | TSLintに移動してTSLint を使用不可にするを選択します。

Vue.js Liveテンプレートを使用するには

1. テンプレートの省略形を入力するか、Ctrl+J を押して、使用可能なテンプレートのリストから選択します。

2. テンプレートを展開するには、Tabを押します。

3. テンプレート内のある変数から別の変数に移動するには、Tab をもう一度押します。

   

Prettierでコードを再フォーマットするには

• エディターで再フォーマットするコードフラグメントを選択するか、プロジェクトツールウィンドウでファイルまたはフォルダーを選択して Ctrl+Shift+Alt+P を押すか、コンテキストメニューからPrettier で再フォーマットを選択します。

• あるいは、Ctrl+Shift+A を押してアクションの検索リストからPrettier で再フォーマットを選択します。

  

Prettierコードスタイルルールを適用するには

• Prettierが有効になっているプロジェクトで、package.json を開き、タブ上部のペインで はい をクリックします。

  

• Prettierコードスタイルを再適用するには（ペインでいいえをクリックするかコードスタイルを変更した後）、Ctrl+Shift+A を押してアクションの検索リストからPrettierコードスタイルルールを適用を選択します。