Vue公式ガイド読解メモ-単一ファイルコンポーネント

今日は「単一ファイルコンポーネント」です

jp.vuejs.org

小さな中規模プロジェクトでは以下は有効（今までみてきた方法）

大規模になるとツライ

  • グローバル宣言は全てのコンポーネントに一意な名前を強制
  • 文字列テンプレートにシンタックスハイライトが無いし、複数行字にスラッシュ（エスケープ文字かな）が強制される
  • CSSサポートが無い
  • ビルド処理が無い、HTML/ES5が制限される

これらを、 .vue拡張子の単一ファイルコンポーネントが解決する。(SFCって呼ばれてるね）

以下が提供されるのかな

jade,stylusとか、html/cssを独自記法で書けるようになるのね。プリプロセッサを通して変換できるからか。 ※jadeとかstylusとかあまりしらないなぁ。簡略記法みたいなもんかな

関心の分離について

注意すべき重要な点

  • 関心事項の分離がファイルタイプの分離と等しくないこと

これは、HTML/JS/CSSが一つのファイルに含まれることだよね。コンポーネント単位の分離になっている。

コンポーネントの内部では、テンプレート、ロジック、スタイルが本質的に結合されている。

でも、別々のファイルに分ける方法も提供されていると。（あ、そうなんだ）

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</dvi>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

へー、別のJSを共通化して、コンポーネントファイル内で読み込むとかできるのね。てか、共通化したいなら、import をJSでおCSSでもできたな。

はじめる

サンドボックスの例

TODOアプリのcodesandbox

Simple Todo App with Vue - CodeSandbox

こんな便利なサイトがあったのか。 Vueを単一ファイルでブラウザ上で書けるし、動作確認もできるすごい。

簡単な動作確認なら、このサイトでできちゃいそうっすね。

JavaScriptでモジュールビルドシステムが初めてなユーザー向け

そういえばVueCLIも2と3とか、バージョンで使い方違ったような。 今後キャッチアップしなきゃだな。

上級者ユーザー向け

  • Vue CLIはconfigで細かく設定ができる
  • 独自のビルドセットアップをゼロから作りたいなら、webpackとvue-loaderで手動で設定が必要

VueCLIはwebpack+vue-loaderが内容されているんだろう。テンプレート生成とか色々機能はあると思うけど。

今日はここまでかな。

次は「テスト」です