このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 Vue.jsを学んでいこう (02:18) 無料公開中- 概要
- レッスンの構成
- 学習環境
-
#02 Codespaceを起動しよう (02:00) 無料公開中- Codespaceの起動
- Codespaceの使い方
-
#03 VS Codeで開発していこう (01:59) 無料公開中- VS Codeからの接続
- 拡張機能のインストール
-
#04 ファイル構成を確認しよう (02:22) 無料公開中- ファイル構成
- ターミナルの起動
- アプリケーションの起動
- ブラウザでの確認
-
#05 ページが表示される仕組みを理解しよう (02:05)- ページが表示される仕組み
- index.html
-
#06 処理の流れを確認していこう (02:30)- main.js
- style.css
- App.vue
-
#07 コンポーネントベースで開発してみよう (01:41)- HTML/CSSによるWeb制作
- コンポーネントベースの開発
-
#08 サイトをVue.jsで組み直そう (02:37)- ポートフォリオサイトの確認
- titleタグの組み込み
- linkタグの組み込み
-
#09 App.vueにコードを移動させよう (02:40)- コードの移動
- 画像パスの変更
-
#10 コンポーネント用のファイルを作成しよう (02:23)- componentsフォルダの作成
- Header.vueファイルの作成
-
#11 Header.vueを実装していこう (01:39)- headerの分離
- templateタグの設置
- styleタグの設置
-
#12 コンポーネントを埋め込んでみよう (02:34)- scriptタグの設置
- Headerコンポーネントの読み込み
-
#13 Main.vueを実装していこう (02:39)- Main.vueの作成
- Mainコンポーネントの読み込み
- コンポーネントタグの記述方法
-
#14 Footer.vueを実装していこう (01:47)- Footer.vueの作成
- Footerコンポーネントの読み込み
-
#15 scopedについて確認しよう (02:48)- scoped属性
- サイト共通のスタイル
