そのほか

【Nuxt.js】Nuxtの環境構築をしよう

前置き

できるだけ分かりやすく、
公式インストールに沿って解説しています✨

その過程で扱うターミナルのコマンドや
プロジェクトの作成時に聞かれる質問について、
lintについてなどなども
触れていきます🍀✍️

参考:
lintツールの選び方
Prettier 入門 ~ESLintとの違いを理解して併用する~
チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめ
scssのためのstylelintとprettierの導入
VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法
【JavaScript】コミットする前にlint-stagedでeslintのチェックをする
commitlint の紹介


前提条件

node

最新バージョン15.14.0でももちろんOK⭕️
ただ、ほとんどのユーザーが使用する14.16.1
こちらをインストールした方が
ユーザーが多い分、
何か困った時の解決策も
多く見つけられる可能性が高いです💫

テキストエディタ

こちらもお好みで選択してください。
私はVSCodeを使用しています🌸

ターミナル

VSCode内
表示 > Terminal で下の方に表示させるか

もしくはmacのFinderでターミナルを検索し

開いて使用します。


create-nuxt-app を使う

まずはターミナルで
Nuxtプロジェクトを作りたい場所まで移動します。

各コマンドはこちら。
$はターミナルのコマンドという意味なので
実際に打ち込む時は$はいりません。

terminal

$ ls // フォルダ、ファイル一覧
$ mkdir <フォルダ名> // 新しいフォルダの作成
$ cd <フォルダ名> // そのフォルダに移動
$ npm init nuxt-app <project-name> // Nuxtプロジェクトを作成

質問される内容は
こちらで確認できます👀
https://github.com/nuxt/create-nuxt-app/blob/master/README.md

選択しない時はそのままEnter
選択する際はspaceなどのキーが
割り当てられているので
それにしたがっていけばOKです⭕️🙆‍♀️
一部ピックアップして解説します✍️

Nuxt.js modules

Axios - Promise based HTTP client

HTTPクライアントライブラリです。
jsonファイルを取ってきたり
そこに追加したりできるもの。

⬇️あとから追加する場合や、
 使い方はこちらをご覧ください👀
【Nuxt.js】nuxt/axiosを導入しよう


Linting tools

lint系の選択ができます。
lintはバグの要因となりそうなコードの指摘をしてくれるものです。
JavaScriptのlintではESLintやPrettierをよく目にします👀
それぞれどんなものかを理解し、
必要に応じて使っていきましょう💫

ESLint

構文のチェックや
下記コマンドでコードの整形までしてくれます。

terminal

$ eslint --fix

Prettier

コードの整形をしてくれます。
ESLintと併用可能で、
構文のチェックができない代わりに
ESLintでは整形できない部分も整形できます。

ESLintはエラーと見なされた部分だけを整形するので
設定を変更する必要などが出てきます😵
対してPrettierは整形ルールがあるので
どんなコードでも簡単に整形することが可能です。

⬇️VSCでの導入方法をご紹介しています。
 command+Sで整形できて簡単です💕
【Nuxt.js】Nuxt番外編:自動でインデント整形!plugin Prettier

Lint staged files

ESLintのエラーを無視して
$ git commitしないようにしてくれるものです。

StyleLint

CSS, Sassなどの
スタイリング用のlintです。

プロパティのスペルミスや
存在しないカラーコードなどをチェック👀

StyleLintを入れてSassなどで変数を使う場合
後からこちらをインストールする必要があります。
stylelint-config-recommended-scss

Commitlint

$ git commit する時のルールに沿っているか
チェックをしてくれるものです。


Deployment target

Static (Static/JAMStack hosting)

⬇️firebaseなどを使って
 デプロイする場合はStaticです
【Nuxt.js】firebase基礎編:Firebase Hosting にデプロイしよう!


Development tools

Dependabot (for GitHub only)

⬇️詳細はこちらをご覧ください
【Nuxt.js】GitHub:Dependabotでパッケージ更新


nuxtのインストール

まずは$ ls
先ほど作成したプロジェクト名があるか
確認しましょう。
$ cd で移動してからこちらを実行します。

terminal

$ npm install nuxt


プロジェクトの開始

このコマンドを実行して
http://localhost:3000
アプリが確認できます✨👀

terminal

$ npm run dev


まとめ

質問の内容全ての解説まではできていませんが、
「環境開発は難しい」という気持ちが
「できるかも!」に変わってきたら幸いです🙌

-そのほか
-,

© 2021 aLiz Nuxt