新プログラミング言語『Zero』を開発しました! 本サイトの記事数は「589」!!

Nuxt.jsを導入して初期表示するまでを実践してみる

Nuxt.jsを導入して初期表示するまでを実践してみる
Advertisement

 

なにやら「Nuxt.js」っていうものがあるらしい。

触ったことがないので触ってみるよ。

でも、特に作りたいものがないので初期導入してGitHubに入れるまでに留めます。

 

僕のプロフィールはこちら

 

 

Nuxt.jsって何や?

Nuxt.jsは、Vue.jsのフレームワークらしい。

え? Vue.jsってそもそもフレームワークじゃね?

って思いましたが、どうやらこんな位置付けだと思われます。

Vue.js JavaScriptのフレームワーク。
Nuxt.js Vue.jsのフレームワーク。

 

まあ、Nuxt.jsはVue.jsを使えるし、Vue.jsよりもいい感じに優れている部分があるって感じでよいかと。

 

 

Nuxt.jsの読み方

ナクスト」です。

 

 

実際にNuxt.jsをセットアップしてみる、の前に

vueコマンドが使えない人は、上記のコマンドを実行して使えるようにしておいてください。

npmコマンドはNode.jsをインストールすれば使えます。

 

 

実際にNuxt.jsをセットアップしてみる

さーて、やりましょう。

 

 

おーっと、どうやら「@vue/cli-init」が必要だったみたいですね。

さっきのセットアップいらないかも。

 

 

npm install -g @vue/cli-init」を打てって言われたので打ちます。

 

 

再度実行します。

アプリ名は適当に「nuxt-app」にしました。

 

 

良くあるやつですが、質問を聞かれます。

全部デフォルトでいいので、そのままEnterを押していきます。

なんか次やることも書いてますね。親切。

 

 

こんな感じでアプリができます。

 

 

node_modulesとか諸々必要なものをインストールする必要があるので、上記コマンドを実行します。

 

 

あれ、「npm  run  serve」じゃないの?

と思いながら実行します。

 

 

Nuxt

http://localhost:3000」にアクセスすると、こんな感じ。

 

 

Advertisement

 

GitHubに入れといた

URL:「https://github.com/izumin0401/nuxt-app」

 

 

まとめ

フォルダ構成とかを見た感じ、Vueとは別物と考えたほうが良さそうですね。

それにしても、各フォルダにREADMEがあるのも面白い。

ではさいなら。

Travelerを知らないの?