Nuxt.js と TypeScript を用いてで TODO アプリを実装する。
- ヘッダー
- タイトルを中央寄せで表示
- 入力フォーム
- タスクを入力
- 追加ボタンをクリックでタスクをリストに追加
- 追加後、入力値をクリア
- タスクリスト
- 箇条書きでタスクを表示
- タスクの右に削除ボタンを配置
- 削除ボタンクリックでタスクを削除
- ボタンはコンポーネント化してください
- データ管理は vuex を用いても、props による受け渡しでもどちらでも構いません
- vue ファイル内の変数等は型をつけてください。
- UI に関しては自由です
- コミットの粒度やコミットメッセージはチーム開発を意識したものにしてください。
- PC/スマートフォンの両方でデザインが崩れないようにしてください(検証ツールにて確認)
- 技術的な面でわからないものがあればこちらに目を通してみてください。
- フレームワーク: Nuxt.js 2 系
- 言語: TypeScript
- CSS フレームワーク: TailwindCSS
- こちらを参考に行ってください
branch 名はintern/github名/年月/todo-list
としてください。
ex) intern/mnt3710/202401/todo-list
$ git checkout -b ブランチ名
機能一覧を参考に todo アプリを作成してください。
PullRequest を作成する際は以下の項目を確認してください。
- コンポーネントファイルやイメージファイルを参照するときは@ではなく~になっているか。
-
console.log()
がコード内に残っていないか。 -
yarn lintfix
を実行し、フォーマットが整っているか。 - PR に正常に動作していることが確認できる画像、または動画を入れているか。
既にインストールされているものは飛ばしてください。
また、macOS の場合の環境構築のため、windows を使っている方は参考にして適宜調べてください。
こちらから vscode のインストールをする
github 上にあるスキルチェックのテンプレートを自分の pc に持ってくる。
$ git clone https://github.com/TheDesignium/dezban-frontend-skill-check.git
$ cd dezban-frontend-skill-check
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
$ nvm install v16.14.1
正常にインストールされていたら以下のようにバージョンが表示される。
$ node --version
v16.19.0
$ npm --version
8.19.3
※ vscode 上のターミナルで作業していて、version が出てこない場合は vscode を再起動する
$ npm install -g yarn
$ yarn -v
$ yarn
$ yarn dev
- Vetur
- ESlint
- Prettier - Code formatter
- Tailwind CSS IntelliSense
package.json を確認(github 上と同じであることを確認)
github と違う内容であればgit pull origin main
を実行
再度yarn
を実行
yarn dev
を実行