Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

【Nuxt.js】Vue CLIによりアプリケーション雛形を作るまで

$
0
0

スクリーンショット 2020-11-28 10.00.51.png

言語化するために記事に起こしました。
汎用性の高いスターターテンプレートで雛形を作成するまでを簡潔に記します。

事前準備

①Node.jsの導入
②Yarnの導入
③direnvの導入

①、②共にNuxt.jsで開発する上で必須となるので導入する(ここではこれらの導入方法については省略します)。

③はターミナルのcurrentディレクトリで環境変数を自動で設定してくれるツール。環境変数の設定忘れを防止するため導入するとよい。

1

ターミナル
npmi-g@vue/cli@vue/cli-init

上記コマンドで、Vueコマンドを追加する。「Vue -V」でバージョン確認。

ターミナル
$vue-V@vue/cli4.5.9

2

1により、「vue init」コマンドでプロジェクト作成可能。
今回は初学者やカスタマイズして利用したい方におすすめのテンプレートである、「my-first-nuxt-app」を利用する。

desktop
$vueinitnuxt-community/starter-templatemy-first-nuxt-app

インストール中のいくつかの質問は全てEnterでOK。
作成後、

ターミナル
$cdmy-first-nuxt-app#ディレクトリに移動$yarn#パッケージをインストール$yarndev# 開発モードでプロジェクトを起動

OPEN http://localhost:3000
と表示後、上記URLにアクセスする。

3

スクリーンショット 2020-11-28 10.00.51.png

このような表示が出れば完了です!


Viewing all articles
Browse latest Browse all 8691

Trending Articles