2-1:TOPページを作成しよう
下記内容を昨日から行いました。失敗!
本日もやり直しました。失敗しました。
明日、もう一チャレンジします!
▼Board.vue ➡済
▼App.vue ➡済
ローカルサーバーを立ち上げます。➡ Error ※確認し、再度Error
※ディレクトリの見直し
※コードの見直し
※ticketnoteに、pngが貼り付けられなくて。
ドラッグしてもダメでした「。「
■下記内容は教材内容です。■
1.componentsディレクトリ配下に新しくBoard.vueを作成しよう
componentsディレクトリ配下に新しくBoard.vueを作成しましょう。
├── src
│ ├── assets
│ │ └── css
│ │ └── styles.css
│ │
│ ├── components
│ │ ├── Board.vue
2.テンプレートをBoard.vueに貼り付けよう
下記のテンプレートをsrc/components/Board.vueに貼り付けてください。
▼Board.vue
src/components/Board.vue
単一コンポーネントはHTML、JS、CSSを1つのファイルに書くことができます。
※今回は、CSSは全てのコンポーネントで共通のファイルとしたので、単一コンポーネントには書きません。
3.内にヘッダーとメインを追記しよう
メインには後ほど実装する予定の「カードの総数表示」のためのモックを準備しておきます。
下の画像の部分を作成しましょう。
下記のコードをsrc/components/Board.vueに追記しましょう。
▼Board.vue
src/components/Board.vue
All: 0 tasks
次章以降でも、このコンポーネントを編集していくことになりますが、このパートではここまでにしましょう。
後は、このコンポーネントをアプリケーションのルートコンポーネントであるApp.vueで呼び出します。
- App.vueからHelloWorldコンポーネントを削除しよう
プロジェクト作成時に生成されたsrc/components/HelloWorld.vueは不要ですので、削除しておきましょう。
さらにsrc/App.vueの下記のコードを削除しましょう。
▼App.vue
src/App.vue

ソース3、4行目の
vue
8行目のimport HelloWorld from './components/HelloWorld.vue'
13行目のHelloWorld
あとは