Skip to content

Latest commit

 

History

History
55 lines (45 loc) · 2.01 KB

component.md

File metadata and controls

55 lines (45 loc) · 2.01 KB

Component

Vue.jsの単一ファイルコンポーネント（SFC）をコンポーネントと定義します。 SFCはview（UI）とviewModel（ロジック）、そして装飾を1つのファイルで持つことができるからです。

ディレクトリ構成

大きく2つにわけられます。

  1. components.js
  2. /componentName

components.js

site.jsにインポートするため、コンポーネントをfunctionとしてエクスポートします。

/componentName

コンポーネント名ごとにディレクトリを作ります。 命名規則はVue.jsのスタイルガイドを基準とします。

propsを受け取るだけのviewコンポーネント単体の場合は、viewコンポーネントがディレクトリ名になります。

components
└── VButton
    └── VButton.vue

emitを受け取るviewModelコンポーネントとviewコンポーネントがある場合は、viewModelコンポーネントがディレクトリ名になります。

components
└── TheHeader
    ├── TheHeader.vue
    ├── TheHeaderLogo.vue
    ├── TheHeaderNav.vue
    └── TheHeaderSearch.vue

中規模以上のディレクトリ構成

一定以上の規模の場合や、viewコンポーネントを再利用していろいろなViewModelコンポーネントを作りたい場合は、large-scale-javascriptの分類を参考にしてください。 /componentNameがprojectになり、containerとui-kitが追加されるイメージです。

components
├── container
│   └── index
│       └── index.vue
├── project
│   └── TheHeader
│       ├── TheHeader.vue
│       ├── TheHeaderLogo.vue
│       ├── TheHeaderNav.vue
│       └── TheHeaderSearch.vue
└── ui
    └── VButton
        └── VButton.vue