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

  1. フロントエンド
  2. 1258 view

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

riri

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

フロントエンドの最近記事

  1. IOSアプリをAppStoreに公開する手順書(Ionic)

  2. IonicAcademyでIonic&Angularでのアプリ開発を学ぶ

  3. Ionic4+firebaseで認証をする方法【ログイン、ログアウト機能の実装】

  4. ハイブリッドアプリ開発チュートリアル【Ionic4+OnsenUI】

  5. Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

関連記事

コメント

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

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

PAGE TOP