はじめに
こんばんは。 結構前に本を見ながら nuxtをやってみたのですが、もう完全に忘れてるのと、6月から別案件で使用する可能性があるので再度入門しようとしてみます。
今回は最初なのでインストールとかもろもろをやってみます。
本題
1. インストール
$ npx create-nuxt-app example01 create-nuxt-app v2.15.0 ✨ Generating Nuxt.js project in example01 ? Project name example01 ? Project description My world-class Nuxt.js project ? Author name kojirock ? Choose programming language JavaScript ? Choose the package manager Npm ? Choose UI framework Tailwind CSS ? Choose custom server framework None (Recommended) ? Choose Nuxt.js modules Axios ? Choose linting tools ESLint, Prettier, Lint staged files, StyleLint ? Choose test framework Jest ? Choose rendering mode Single Page App ? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert s
以前の案件で他のエンジニアさんがおすすめしていた tailwind cssを選択して、Eslint, Prettier, Lint staged files, StyleLintもいれてみました。
TSは今回使わずに行きます。
自分のレポジトリにアップしようと思ったら、 eslintでエラー出ました ...
$ npm run lint > example01@1.0.0 lint /Users/kojirock/projects/study/nuxt/example01 > eslint --ext .js,.vue --ignore-path .gitignore . /Users/kojirock/projects/study/nuxt/example01/tailwind.config.js 2:1 error Insert `·` prettier/prettier 3:1 error Insert `·` prettier/prettier 4:1 error Insert `·` prettier/prettier 5:1 error Insert `·` prettier/prettier 6:1 error Insert `·` prettier/prettier ✖ 5 problems (5 errors, 0 warnings) 5 errors and 0 warnings potentially fixable with the `--fix` option. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! example01@1.0.0 lint: `eslint --ext .js,.vue --ignore-path .gitignore .` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the example01@1.0.0 lint script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/kojirock/.npm/_logs/2020-05-22T21_55_17_781Z-debug.log
tailwind.confg.jsでエラってるみたいです。
本来このファイルは特にlinterチェックする必要なさそうだったので、 .eslintrc.js
の ignorePatterns
に追加したらうまくいきました。
pushしたので、いったんnetlifyにあげてみます。
とりあえず出来ました。
後の変更点としては、ローカルで立ち上げようとすると、デフォルトで立ち上がる ポート 3000番が別のもので使用中だったので、ポート番号を変更してます。
"dev": "nuxt -p 9998",
1. trelloっぽいの作ってみる
trelloっぽいサイトを作ってみます。
<template> <div class="bg-blue-100"> <h1 class="text-2xl">Todo List</h1> <div class="flex"> <div class="flex-1 bg-gray-100 m-2"> <p class="text-xl">todo</p> <div class="z-10 flex-auto bg-white m-2 p-3 shadow"> card1 </div> </div> <div class="flex-1 bg-gray-100 m-2"> <p class="text-xl">doing</p> <div class="z-10 flex-auto bg-white m-2 p-3 shadow"> card1 </div> <div class="z-10 flex-auto bg-white m-2 p-3 shadow"> card2 </div> <div class="z-10 flex-auto bg-white m-2 p-3 shadow"> card3 </div> </div> <div class="flex-1 bg-gray-100 m-2"> <p class="text-xl">done</p> <div class="z-10 flex-auto bg-white m-2 p-3 shadow"> card1 </div> <div class="z-10 flex-auto bg-white m-2 p-3 shadow"> card2 </div> </div> </div> </div> </template> <script> export default { components: {} } </script> <style></style>
tailwindのおかげで、自分的にcssの障壁がかなり低くなりました。
おわりに
nuxtである必要があまりないかも...w
まぁ一旦trelloぽいの作った後、次はまたページ数増やした何かを作るみたいな感じでステップアップしようと思います。
という感じで、一旦今回はここまで。
次はカードの追加と、カードの移動とかやってみます。