プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

Nuxt入門〜create-nuxt-appでお手軽開発

最終更新日:2018/11/26

Nuxtがv2にアップデートされてますます盛り上がりを見せてますね。話題のNuxt開発を今すぐ始めるために便利なcreate-nuxt-appでプロジェクトを作成する手順を説明します。

create-nuxt-appとは

create-nuxt-appとはNuxtのプロジェクトを一瞬で立ち上げられる便利なツールです。Reactの世界ではcreate-react-appが提供されていましたが、ついにNuxtの方にもきました!

プロジェクトを作成する

npxを使う

まずはnpxを使う方法です。

npx create-nuxt-app my-app

yarnを使う

yarnの場合は以下のようにして作成します。

yarn create nuxt-app my-app

create-nuxt-appをグローバルインストールする

yarn global add create-nuxt-app

create-nuxt-app my-app

プロジェクトの設定

次に質問に答える形式でプロジェクトの設定をして行きます。

Project name プロジェクトの名前を設定します
Project description プロジェクトの説明を設定します
Use a custom server framework サーバサイドのフレームワークを設定します
以下の7つから選択できます
– none
– express
– koa
– adonis
– hapi
– feathers
– micro
Use a custom UI framework 使用するUIフレームワークを選択します
以下の6つから選択できます
– bootstrap
– vuetify
– bulma
– tailwind
– element-ui
– buefy
Choose rendering mode レンダリングモードを指定します
以下の2つから選択できます
– Universal
– Single Page App
Use axios module axiosモデュールを使うか決めます
– no
– yes
Use eslint eslintを使うか決めます
Use prettier prettierを使うか決めます
Author nameプロジェクトの作成者を設定します
Choose a package manager パッケージマネージャを選択します
– npm
– yarn

プロジェクトの起動

まずパッケージのインストールをします。

cd my-app

npm install

# OR

yarn

プロジェクトを起動します

npm run dev

# OR
yarn dev

http://localhost:3000にアクセスして見てください。以下のような画面が表示されるはずです!

以上です〜

The following two tabs change content below.

riri

25歳。 Twitter:りりー@ryudoi1 // windii socialというslackチャンネルで質問や雑談等受け付けてるので気軽に参加してください!(もちろん無料です) フリーランスになるまでの過程は こちら

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP