VUE3 入門チュートリアル: vue-loader を使用して Vue.js コンポーネントを解析およびコンパイルする

Vue.js は、最新の Web アプリケーションの構築に非常に強力な人気のある JavaScript フレームワークです。従来の MVC フレームワークと比較して、Vue.js はユーザー インターフェイスを構築するためのよりセマンティックで直感的な方法を提供します。最近リリースされた Vue 3 バージョンでは、多くの新機能と最適化が導入され、Vue.js の使用がよりアクセスしやすく、より柔軟になりました。

Vue.js では、コンポーネントは最も重要な抽象概念の 1 つです。各コンポーネントには独自のテンプレート、データ、メソッドを含めることができ、アプリケーション全体の状態を気にせずに簡単に再利用できます。 Vue.js は、開発者が高度にカスタマイズ可能で再利用可能なコンポーネントを作成できるように、柔軟なコンポーネント システムを提供します。この記事では、vue-loader を使用して Vue.js コンポーネントを解析およびコンパイルする方法を紹介します。

Vue-loader とは何ですか?

Vue-loader は、Vue.js によって正式に開始された Webpack プラグインです。.vue ファイルの解析とコンパイルに使用されます。その主な機能は次のとおりです。 .vue ファイルを変換する ファイル内の HTML、CSS、および JavaScript コードを JavaScript モジュールに変換し、Webpack がこれらのモジュールを処理して最終的な JavaScript ファイルにバンドルできるようにします。

Vue-loader の主な機能は次のとおりです:

• .vue ファイルの解析
• サポート プリプロセッサ (Sass や Less など)
• コンパイル.vue ファイルのテンプレート、スクリプト、スタイル

Vue-loader のインストール

Vue-loader を使用するには、まず Vue.js と Webpack をインストールする必要があります。これらの依存関係は、npm を使用してコマンド ラインでインストールできます。

npm install vue webpack webpack-cli vue-loader vue-template-compiler -D

インストールが完了したら、Webpack 構成ファイルに Vue-loader プラグインをロードする必要があります。 webpack.config.js ファイルを開き、次のコードを追加します。

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
    // make sure to include the plugin!
  ]
}

これで、Webpack がアプリケーションをビルドすると、Vue-loader がすべての .vue ファイルを自動的に解析してコンパイルします。

Vue コンポーネントの記述方法

Vue コンポーネントは、Vue.js でアプリケーションを構築するための基本的な構成要素です。上で述べたように、Vue-loader はすべての .vue ファイルを JavaScript モジュールに解析します。したがって、Vue コンポーネントを作成するには、特定の構文を使用する必要があります。この記事では、Single File Component (SFC) 構文を使用して Vue コンポーネントを作成します。

SFC は、すべてのテンプレート、スクリプト、スタイルを 1 つの .vue ファイルにパッケージ化する構文です。各 SFC ファイルには次のコンテンツが含まれています:

<template>
  <!-- HTML模板 -->
</template>

<script>
export default {
  // Vue组件选项
}
</script>

<style>
/* 样式 */
</style>

上記のコード スニペットでは、コンポーネントの 3 つの重要な部分がわかります: