最終更新:2018-03-29 (木) 16:34:04 (2219d)  

Vue Loader
Top / Vue Loader

Vue.js component loader for webpack.

https://github.com/vuejs/vue-loader

vue-loaderとは以下の形式で記述されたVue.js/コンポーネントをプレーンなJavaScript/モジュールに変換するwebpackの loader です。

概要

  • vue-loaderはファイルを解析し、それぞれの言語ブロックを必要に応じて他の loader を通し、最終的に module.exportsVue.js のコンポーネントオプションオブジェクトの CommonJS モジュールに変換します。

.vue

  • Vue Component
  • HTML のような構文を使用して Vue コンポーネントを記述するカスタムファイルフォーマット

template

  • デフォルトの言語は html
  • それぞれの *.vue ファイルは最大で一つの <template> ブロックを含みます
  • 内容は文字列に展開され、コンパイルされた Vue コンポーネントの template オプションで使用されます

script

  • デフォルトの言語は js(babel-loader や buble-loader が検出される場合、自動的にES2015がサポートされる)
  • それぞれの *.vue ファイルは最大で一つの <script> ブロックを含みます スクリプトは CommonJS のように処理されます( webpack 経由でバンドルされた通常の .js モジュールと同じです)。つまり他の依存関係を require() することができます。そして ES2015 がサポートされ、import と export 構文を使用することが出来ます
  • スクリプトは Vue.js コンポーネントのオプションオブジェクトをエクスポートする必要があります。 Vue.extend() によって拡張されたコンストラクタもエクスポートすることが可能ですが、プレーンなオブジェクトが好ましいです

style

参考

関連