###### tags: `学習`

[TOC]

# Nuxt.js(Vue.js) 勉強会資料

# 新資料はこちら（現在目次のみ）
https://hackmd.io/@tnsyuu/S1Gsxsa-t

※ 本日は一旦HackMDで作成 、実際の資料はGoogle Driveでの共有を予定
- 最終的には資料見るだけで目的達成出来るような粒度の資料にしたい(願望)

## 目的
- Nuxt.js(Vue.js)のModelの基礎知識を得て簡単なページの作成が可能となるようにする

## Vue.jsとは
- Vue.js は MVVM方式のJavascriptフレームワーク

### MVVMモデルとは
- Model-View-ViewModelからなるモデル
- Model
- データの管理や保存、外部との入出力や内部的な処理を行う
- View
- 画面表示や画面上の入力・操作の受け付けを行う
- ViewModel
- ViewとModelの間に存在し、互いの状態の変更を通知し反映させる役割
- MVC(Model-View-Controler)モデルと比べ、状態の変更を即座に表示に反映させることが出来る等のメリットがある

## Nuxt.jsとは
- Nuxt.js は Vue.jsのために作成されたフレームワーク
- Vue.jsの課題であったサーバーサイドレンダリングを行えるフレームワーク
- 本プロジェクトはNuxt.jsで実装を行うため主にNuxt.jsの記法を学ぶ

## Nuxt.jsのページ構成について
1. Nuxt.js(Vue.js)はページのパーツ(再利用性の高いもの)をコンポーネント（Components）として作成する
- Header/Footer等は特にコンポーネント化するのが望ましい
1. コンポーネントをレイアウト(Layouts)ファイルに配置する
1. Layoutsのファイルをページ(Pages)ファイルにインポートすることでページが表示可能となる

※ Page単体でも表示作成は可能

<center>構成(公式サイトより)</center>

## ルーティング
- Vue.jsでは手動でルーティングを設定する必要があるが、Nuxt.jsではPagesにファイルを配置するだけ自動的にルーティングを作成する

### 各ディレクトリ
- よく使用するディレクトリについて簡単に解説する

#### pages ディレクトリ
- アプリケーションのビューとルートが含まれている。

#### components ディレクトリ
- componentsディレクトリにはページにインポートするすべての Vue.js のコンポーネントファイルを格納する。
- Nuxt.js を使用すると、作成したコンポーネントを `.vue` ファイルに自動でインポートすることが可能。
- nuxt.config.js 内のcomponents を true に設定すると、Nuxt.js がスキャンして自動でインポートする。

#### assets ディレクトリ
- スタイルや画像、フォントなどコンパイルされていないアセットを格納。

#### static ディレクトリ
- 直接サーバのルートに配置される
- 名前を保持しなければいけないファイルもしくは変更されない可能性の高いファイルが含まれる。

#### layouts ディレクトリ
- ComponentsファイルとPagesファイルのレイアウトを作成する

#### nuxt.config.js ファイル
- モジュールの追加やデフォルトの設定を上書きしたい場合にここを変更する。

## 実際にページを作成してみる
- 細かな記法の資料作成は間に合わなさそうなので一旦実際に作成したソースで確かめる
Todo:最終的な資料にはまとめておく

### 学習内容
1. Hello world作成
- `npx create-nuxt-app <project-name>` を使用して
3. Component作成
1. Header作成
4. Layouts設定
5. PagesへのImport
6. 親子Componentのデータ受け渡し
1. props
2. emit
7. ストア(Vuex)利用
1. ストア作成
1. ストアの参照
1. ストアのデータ更新