はじめに
なにかを始めるときはやっぱりHello wouldでしょう!
公式でも”スクラッチから始める”というタイトルで紹介されていますが、自分への備忘録として簡単に残しておきたいと思います。
空のディレクトリを準備する
まず最初にアプリケーションで動かす空のディレクトリを作りましょう。
コマンドプロンプト等で以下のコードを打ち込みましょう。
(エクスプローラーで作成しても全然大丈夫です!)
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などで検索すると・・・
無事成功しました!
さいごに
これでHello wouldも完璧です!