SFC(Single File Components、単一ファイルコンポーネント)とは？
コンポーネントのHTML、CSS、JavaScriptを一つのファイルに記述して「.vue」という拡張子をつけたモジュールのことです。SFCとも呼ばれます。
特徴
- 名前の通り「一つのファイルに一つのコンポーネント」しか定義することができません。
- 開発環境でのみ使える特殊なフォーマットでありブラウザでそのまま実行することはできません。
- 「Vue CLI」をインストールしてブラウザで実行可能な形式(HTML、CSS、JavaScript)に変換する必要があります。
- 他のコンポーネント（モジュール）の読み込みにはimportを使います。
メリット
- Vue.jsのコンポーネントのソースコードを一つのファイルで一元管理できるようになります。保守性向上に繋がります。
- 従来のWeb標準技術(HTML、CSS、JavaScript)で構成されているので学習コストが低いこと。
SFCのフォーマット
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> HTMLの内容（v-if等の通常のtemplateオプションの記述も利用可能） </template> <script> //何かしらの処理 export default{ //JavaScriptの処理内容（UIの振る舞いを記述する） } </script> <style scoped> CSSの内容 </style> |
template
HTMLの内容、v-if等の通常のtemplateオプションの記述も利用可能です。
script
SFCではES2015の構文である必ずエクスポートしなければなりません。
scoped
SFC独自の属性でstyleタグに定義したスタイルにスコープを与えます。scopedを定義したスタイルはそのコンポーネントのみに適用されるようになります。
ビルドのされ方
ビルドされることによって、vueという本来はブラウザで実行する事ができない形式をブラウザで実行できる形式に変換してくれます。
上記の図で言えば真ん中の箱は「バンドルツール」になります。中でもSFCが提供している全機能を使うことができる「webpack向けのVue Loader」というバンドルツールが人気でしょう。
vue serve
内部的にwebpackやVue Loaderを利用しておりビルドツールとして便利です。
--open
ブラウザでビルド結果を確認できます。
この記事へのコメントはありません。