ソースコードから理解する技術-UnderSourceCode

手を動かす(プログラムを組む)ことで技術を理解するブログ

NuxtJSのことはじめ

タイトルにあるようにNuxtJSを始めてみました。
Visual Studio Codeでいくつか入門ページをやってみましたが、以下を覚えておくと便利そうだと思ったのでメモ代わりに残しておきます。

NuxtJSのプロジェクト作成~起動

以下のコマンドで作成します。(NuxtJSはインストール済である前提で)

$ npx create-nuxt-app your-favorite-project

インストール時に選択肢が出てきますが、今回は以下のように選択してみました。

? Project name: your-favorite-project
? Programming language: TypeScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code)                           
  • modulesには「Axios」を選択
  • Linting toolsには「ESLint」

を選びました。(Rendaring modeや言語は適宜変えることになるかと思います。)

起動は以下となります。

$ npm run dev

Visual Studio Code の 設定

上記でLinting toolsに「ESLint」を選んだため、ソースを保存するたびにESListのチェックが入ります。
手動でフォーマットを変更するのは面倒なので、プロジェクトフォルダ内のVisual Studio Code の 設定ファイルに以下の記述を行いました。

.vscode/settings.json

{
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Visual Studio CodeのESListプラグインはインストールしてある前提です。
見ての通り、タブのインデントの指定と、ソース保存時にESLintのフォーマットを行っています。

まとめ

必要最小限のコマンドや設定ですが、上記を覚えておくことでストレスなくHello World的なものは進められると思います。
また便利な設定などあれば追記していくつもりです。