-
Notifications
You must be signed in to change notification settings - Fork 0
1. ディレクトリ構成
このプロジェクトの基本的なディレクトリ構成は以下のようになっています。
├── assets
├── components
├── layouts
├── pages
└── static
以下では各ディレクトリの詳細について見ていきます。
assets/は以下のようになっています。
assets
└── sass
├── foundation
│ ├── mixin.scss
│ └── variable.scss
└── global.scss
assets/はSassファイルなどを配置します。
後述のstatic/以下には本番環境でもそのままの状態で配信されるものを配置します。
それ対して、assets/にはSassファイルのようにビルド時に何か処理を加えてその生成物を配信するようなファイルを配置するという点が異なります。
sass/以下に配置されているSassファイルはいずれも全てのページにて読み込まれるように設定しています。
Sassのミックスイン機能を用いてミックスインを定義しています。各コンポーネントではここで定義されたミックスインを使用することができます。
Sassの変数機能を用いて各変数を定義してます。各コンポーネントではここで定義された変数を使用することができます。
各コンポーネントに対するスタイルは各コンポーネント内で記述すればいいですが、それをこえてサイト全体に適用したいスタイルはここに記述します。
components/は以下のようになっています。
components
├── atoms
├── molecules
└── organisms
components/にはVueコンポーネントを配置します。
components/下の各ディレクトリについてはAtomic Designの項を参照してください。
layouts/ではページで読み込むレイアウトファイルを定義します。
各pageコンポーネントは読み込むレイアウトを指定します。
何も指定されていない場合はlayouts/default.vueが読み込まれます。
pages/ではページコンポーネントを配置します。
_から始まるページでは_以降を変数名として取り出すことができます。
例えばpages/users/_userid.vueを作成したとします。
このときpages/users/_userid.vue内部では/users/janeというURLへのアクセスに対し、janeという値をuserid=janeとして取り出すことができます。
static/には静的リソースを配置します。
static/以下のファイルは/以下のURLで参照できます。
例えば、static/favicon.icoは/favicon.icoというURLで参照されます。