このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 ECサイトをNuxtに組み込んでいこう (01:50) 無料公開中
- 実践編の概要
- 開発環境の確認
- Nuxtに組み込むサイトの確認
-
#02 サイト全体のスタイルを移植していこう (02:45) 無料公開中
- サイトのソースコードを確認
- titleタグの移植
- 共通のスタイルの移植
-
#03 containerのスタイルを移植していこう (01:08) 無料公開中
- containerの設置
- スタイルの設定
-
#04 Headerを組み込んでいこう (01:40)
- Header.vueの編集
- NuxtLinkの設定
-
#05 Footerを組み込んでいこう (01:15)
- Footer.vueの編集
- スタイルの移植
-
#06 商品を表示してみよう (01:41)
- 商品関連コードの移植
- スタイルの移植
-
#07 もっと商品を増やしてみよう (02:55)
- productsの宣言
- v-forによるli要素の生成
-
#08 商品データを整備していこう (02:39)
- toLocaleString()の活用
- key属性の付与
- データの整備
-
#09 商品の詳細ページを作ろう (02:57)
- products/0.vueの作成
- 商品データの埋め込み
-
#10 ダイナミックルーティングを使ってみよう (03:00)
- ダイナミックルーティング
- NuxtLinkの設定
-
#11 useState()でデータを管理していこう (02:18)
- useState()の設定
- useState()で設定した値を使う方法
-
#12 useState()でデータを取得してみよう (02:22)
- useState()による値の取得
- useRoute()によるURL情報の取得
- idの取得
-
#13 商品データを取得しよう (02:12)
- find()
- Number()
- .valueに関する注意点
-
#14 サイトを完成させよう (02:35)
- 商品データの整備
- 商品データの埋め込み
