 機能要件
 タスク追加機能→自由にタスクを入力できる欄と追加ボタンを画面に配置する

 タスク削除機能→タスク追加機能で作成したタスクを削除する

 ログイン／新規登録機能→ログインと新規登録機能を作成する(今回はGoogleログインなどは実装しない)

 まとめ上記、３つのシンプルな機能を実装していく！

ガネーシャ

使用する技術

Vue/tailwind
Vite
Supabase
以上！
デプロイは適当にVercel/Cloud flare Pagesにできそうならやってみる！

ガネーシャ

環境構築

環境構築していくとはいっても,ローカルにNode.jsが導入されていればすぐに終わる作業である。

上記、バージョンのnodeとnpmで作業していく！

ガネーシャ

viteでvueプロジェクト作る

npm  create vite@latest

上記、コマンドでプロジェクトを作成する

設定については画像の通りである。
TypeScriptを使うのが面倒だったので(よくないが...( ´艸｀))
JavaScriptを選択した.

画像の通り、npm run devでlocalhost:5173で無事実行されていることを確認

ガネーシャ

TailwindCSSを導入していく

上記、リンクを参考に作業を行った。
実行したコマンドと作業内容を以下に示す。

必要なものをinstall

npm install tailwindcss @tailwindcss/vite

vite.config.hsを編集する

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+ import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
      vue(),
+    tailwindcss(),
  ],
})

差分を上記に示す

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss()
  ],
})

コピペ用に示す

style.cssの編集

@import "tailwindcss";

作業内容は以上！

tailwindが使えるのか検証


<template>
  <div id="app">
    <h1 class="text-3xl font-bold underline bg-blue-500 text-white p-4 text-center">
      Welcome to Your Vue.js App
    </h1>
  </div>
</template>

上記のようなコードでスタイルが反映されるの確認

上記画像のようにスタイルが反映されることを確認

ガネーシャ

続きは仕事の後、やります