これから何回かに分けて、Nuxt.jsのチュートリアルを兼ねたポートフォリオ制作をしていきます。
Node.jsのインストール
Nuxt.jsをインストールするためには、npxもしくはyarnを使います。
今回はnpxを使った方法を紹介します。
npxを使うにはNode.jsをインストールする必要があります。ここで推奨版をダウンロード後、.msiファイルを開き、指示に従ってインストールを進めてください。
ターミナルを開き、以下のコマンドを実行します。
$ npx -v
バージョンが表示されればインストールは完了です。
Nuxtプロジェクトの作成
好きなディレクトリに移動してもらい、そこでコマンドを実行します。
$ npx create-nuxt-app プロジェクト名
プロジェクト名は好きに決めてください。ここでは、nuxt-portfolioとしておきます。
$ npx create-nuxt-app nuxt-portfolio
コマンド実行後、ターミナル上で設定項目を質問されますので、以下の設定にしてください。
? Project Name: (nuxt-portfolio) // そのままエンター
? Programming language: (Use arrow keys)
> JavaScript // 選択
TypeScript
? Package manager: (Use arrow keys)
> Yarn
Npm // 選択
UI Flamework: (Use arrow keys)
> None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuefify.js // 選択
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios // 選択
( ) Progressive Web App (PWA)
( ) Content
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint // 選択
( ) Prettier
( ) Lint staged files
( ) StyleLint
? Testing framework: (Use arrow keys)
> None // 選択
Jest
AVA
WebdriverIO
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG) // 選択
Single Page App
Deployment target: (Use arrow keys)
> Server (Node.js hosting) // 選択
Static (Static/JAMStack hosting)
Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code) // 選択
( ) Semantic Pull Requests
すべて選択し終えるとプロジェクトの作成が始まりますので、しばらく待ちます。
プロジェクトの起動
プロジェクトの作成が終了したら、nuxt-portfolioディレクトリに移動します。そこで以下のコマンドを実行します。
$ npm run dev
ターミナル上にローカルホストのアドレスが表示されるので、アクセスしてみましょう。
上の画面が表示されます。
これでポートフォリオのひな型が出来上がりました。
次回から実際にサイトを構築していきます。