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

フロントエンド
1900 view

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

最終更新日:2018/11/26

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

create-nuxt-appとは
プロジェクトを作成する
プロジェクトの設定
プロジェクトの起動
- - WINDII
  - 最新記事 by WINDII (全て見る)

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 サーバサイドのフレームワークを設定します
以下の７つから選択できます
– none
– express
– koa
– adonis
– hapi
– feathers
– micro
Use a custom UI framework　使用するUIフレームワークを選択します
以下の６つから選択できます
– bootstrap
– vuetify
– bulma
– tailwind
– element-ui
– buefy
Choose rendering mode　レンダリングモードを指定します
以下の２つから選択できます
– 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にアクセスして見てください。以下のような画面が表示されるはずです！

以上です〜

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック