前置き
できるだけ分かりやすく、
公式インストールに沿って解説しています✨
その過程で扱うターミナルのコマンドや
プロジェクトの作成時に聞かれる質問について、
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
まとめ
質問の内容全ての解説まではできていませんが、
「環境開発は難しい」という気持ちが
「できるかも！」に変わってきたら幸いです🙌