もがき系プログラマの日常

もがき系エンジニアの勉強したこと、日常のこと、気になっている技術、備忘録などを紹介するブログです。

久々にnuxt入門した #01

はじめに

こんばんは。 結構前に本を見ながら 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.jsignorePatterns に追加したらうまくいきました。

pushしたので、いったんnetlifyにあげてみます。

f:id:kojirooooocks:20200523075427p:plain

f:id:kojirooooocks:20200523075442p:plain

とりあえず出来ました。

後の変更点としては、ローカルで立ち上げようとすると、デフォルトで立ち上がる ポート 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>

f:id:kojirooooocks:20200523075509p:plain

tailwindのおかげで、自分的にcssの障壁がかなり低くなりました。

おわりに

nuxtである必要があまりないかも...w

まぁ一旦trelloぽいの作った後、次はまたページ数増やした何かを作るみたいな感じでステップアップしようと思います。

という感じで、一旦今回はここまで。

次はカードの追加と、カードの移動とかやってみます。