vueを勉強する

vue.jsを勉強しようかと思って、Udemyの講座を２つばかり購入。（vue3入門とnuxt3入門）

https://www.udemy.com/course/nuxtjs-the-complete-guide/

https://www.udemy.com/course/learn-vuejs/

nuxtの講座が短いのでちょっとやってみたらnuxt4がインストールされちゃって ちょっと違いがあるみたい。

でもまぁ新しいバージョンのほうが良いかなと思ってそのままやってみることにする。

nuxt3まではプロジェクト直下にpagesディレクトリとか作ってたようなのだけど、 nuxt4だとappディレクトリ内にapp.vueやpagesディレクトリ,layoutsディレクトリなどを 配置するようになったみたい。

あと、ちょっとはまったのが、divのクラス。

layouts/default.vueで

<template>  
  <div class="container">  
    <slot />  
  </div>  
  <footer>footer</footer>  
</template>  
<style>  
.container {  
  color:red;  
}  
footer {  
  background:orange;  
  color:white;  
  text-align: center;  
}  
</style>

だとpages/index.vueで記述していた文字は赤にはならず

<section class="container">

にしたらスタイルがあたるようになった。

別のところで、

import { Ref } from 'vue'

があるとエラーになって動作しなかった。(nuxt4は自動でimportされているらしい)

短い講座だけど手を動かしてると時間がかかる。 でも本当に基礎なのでまぁバージョン違ってもなんとかなりそう。

12/14
Nuxtの入門コース終了。

レイアウト、以下の場合だとちゃんとスタイルあたった。 最初にdivだとダメなのかも。

<h1>To Do</h1>
<div class="content">
<slot />
</div>