はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Nuxt.js】Nuxt.jsで簡単かつシンプルにHello wouldしてみた

はじめに

なにかを始めるときはやっぱりHello wouldでしょう!

公式でも”スクラッチから始める”というタイトルで紹介されていますが、自分への備忘録として簡単に残しておきたいと思います。

インストール - NuxtJS

空のディレクトリを準備する

まず最初にアプリケーションで動かす空のディレクトリを作りましょう。

コマンドプロンプト等で以下のコードを打ち込みましょう。
(エクスプローラーで作成しても全然大丈夫です!)

mkdir nuxt-min

今回は必要最低限のアプリにするので、nuxt-minという名前にしてみました。

package.jsonを作成する

package.jsonは環境変数設定を含んだnpmスクリプトを記述するファイルのことです。
これも作成し、以下のコードを打ち込みます。

{
  "name": "nuxt-min",
  "scripts": {
    "dev": "nuxt"
  }
}

nuxt のインストール

package.json を作成できたら、nuxt-minに早速nuxtをインストールしましょう。
コマンドプロンプトに以下のコードを打ち込みます。

npm install --save nuxt

pages ディレクトリの作成

コマンドプロンプト等でpagesディレクトリを作成します。

mkdir pages

index.vueを作成する

pagesディレクトリ内にindex.vueを作成し、以下のコードを打ち込みます。

<template>
  <h1>Hello world!</h1>
</template>

プロジェクトの起動

最後にローカルホストを立ち上げましょう。
こちらのコードをコマンドプロンプト等に打ち込みます。

npm run dev

そしてhttp://localhost:3000をchromeなどで検索すると・・・

f:id:hanaaaaaachiru:20190118002039p:plain

無事成功しました!

さいごに

これでHello wouldも完璧です!