自分なりの解釈で各項目にコメントを入れました。詳細は公式ドキュメントをみてください。
インストール
create-nuxt-app
$ npx create-nuxt-app <project-name>
? Project name
? Project description My fine Nuxt.js project
? Author name ()
? Choose the package manager (Use arrow keys)
パッケージマネージャーを選択します（矢印キーを使用）
❯ Yarn
Npm
? Choose UI framework (Use arrow keys)
UIフレームワークを選択。自分でcssとか書いていくのがキツイ人は入れてもいい。
❯ None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuetify.js
? Choose custom server framework (Use arrow keys)
カスタムサーバーフレームワークを選択する。推奨されてるやつをとりあえず選択しておく。
❯ None (Recommended)
AdonisJs
Express
Fastify
Feathers
hapi
Koa
Micro
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
Nuxt.jsモジュールを選択します（選択するには<space>を押し、すべてを切り替えるには<a>、選択を反転するには<i>を押します）
迷ったら全部選択してみる。
❯◯ Axios
◯ Progressive Web App (PWA) Support
◯ DotEnv
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
リンティングツールを選択する
必要なので入れましょ。どのツールも入れておいた方が良さげなので全部選択。
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
? Choose test framework (Use arrow keys)
テストフレームワークを選択する
迷う。とりあえずJestかな。でも個人のサイトでテスト作る必要はないかも。
❯ None
Jest
AVA
? Choose rendering mode (Use arrow keys)
レンダリングモードを選択する
SSRを推奨していたと思うのでそのまま。
❯ Universal (SSR)
Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
開発ツールを選択する
とりあえず入れておく。
❯◯ jsconfig.json (Recommended for VS Code)? Author name () $ npm run dev
http://localhost:3000/ で確認Stylelintエラー発生
以下のエラーが表示されている。Stylelintのエラーが既に出ているようです・・・（なぜ）
ERROR StylelintError friendly-errors 15:26:06
No rules found within configuration. Have you provided a “rules” property?
No rules found within configuration. Have you provided a “rules” property?
設定ファイルにruresプロパティが存在しない。何も入っていない初期状態です。スケルトンなので入れておいて欲しいところ。
// 変更前
module.exports = {
// add your custom config here
// https://stylelint.io/user-guide/configuration
}
// 変更後
module.exports = {
"rules": {}
}これで無事localhostが表示されました。
表示されている内容は pages/index.vue になります。
その他、公式ドキュメントがわかりやすくまとまっているので、こちらへどうぞ
次はディレクトリ構造です