なにやら「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をセットアップしてみる、の前に
|
1 |
npm install -g @vue/cli |
npmコマンドはNode.jsをインストールすれば使えます。
実際にNuxt.jsをセットアップしてみる
さーて、やりましょう。
|
1 2 3 4 |
>vue init nuxt-community/starter-template nuxt-app Command vue init requires a global addon to be installed. Please run npm install -g @vue/cli-init and try again. |
おーっと、どうやら「@vue/cli-init」が必要だったみたいですね。
さっきのセットアップいらないかも。
|
1 |
npm install -g @vue/cli-init |
「npm install -g @vue/cli-init」を打てって言われたので打ちます。
|
1 |
vue init nuxt-community/starter-template nuxt-app |
再度実行します。
アプリ名は適当に「nuxt-app」にしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
>vue init nuxt-community/starter-template nuxt-app ? Project name nuxt-app ? Project description Nuxt.js project ? Author kohei izumi <hogehoge> vue-cli · Generated "nuxt-app". To get started: cd nuxt-app npm install # Or yarn npm run dev |
良くあるやつですが、質問を聞かれます。
全部デフォルトでいいので、そのままEnterを押していきます。
なんか次やることも書いてますね。親切。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
nuxt-app> ls ディレクトリ: C:\Users\hoge\Desktop\tmp\nuxt-app Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 2020/03/01 20:34 assets d----- 2020/03/01 20:34 components d----- 2020/03/01 20:34 layouts d----- 2020/03/01 20:34 middleware d----- 2020/03/01 20:34 pages d----- 2020/03/01 20:34 plugins d----- 2020/03/01 20:34 static d----- 2020/03/01 20:34 store -a---- 2020/03/01 20:34 207 .editorconfig -a---- 2020/03/01 20:34 484 .eslintrc.js -a---- 2020/03/01 20:34 92 .gitignore -a---- 2020/03/01 20:34 813 nuxt.config.js -a---- 2020/03/01 20:34 614 package.json -a---- 2020/03/01 20:34 397 README.md |
こんな感じでアプリができます。
|
1 |
nuxt-app> npm install |
node_modulesとか諸々必要なものをインストールする必要があるので、上記コマンドを実行します。
|
1 |
nuxt-app> npm run dev |
あれ、「npm run serve」じゃないの？
と思いながら実行します。
「http://localhost:3000」にアクセスすると、こんな感じ。
GitHubに入れといた
まとめ
フォルダ構成とかを見た感じ、Vueとは別物と考えたほうが良さそうですね。
それにしても、各フォルダにREADMEがあるのも面白い。
ではさいなら。