Nuxt.jsに入門した - kapieciiのブログ

nuxtで自分用のツールを作ってみよう。そうしよう。
— kapiecii (@kapiecii) March 14, 2019

ということで、Nuxt.jsに入門してみました。
本当はもう少し進捗を出してから記事にしようかと思ったのですが、諸々の都合により一旦門を叩いたところまで。

インストール
プロジェクト作成
起動確認
ページを追加する
Vuetifyを使ってみる
element-uiを使ってみる
最後に

インストール

$ npm i create-nuxt-app

プロジェクト作成

$ ./node_modules/create-nuxt-app/cli.js hello-nuxt-prj
> Generating Nuxt.js project in
? Project name hello-nuxt-prj
? Project description hello world
? Use a custom server framework none
? Choose features to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Universal
? Author name kapiecii
? Choose a package manager npm

  To get started:

    cd hello-nuxt-prj
    npm run dev

  To build & start for production:

    cd hello-nuxt-prj
    npm run build
    npm start

起動確認

$ cd hello-nuxt-prj/
$ npm run dev
> hello-nuxt-prj@1.0.0 dev
> nuxt

ℹ Preparing project for development                                                      11:30:38
ℹ Initial build may take a while                                                         11:30:38
✔ Builder initialized                                                                    11:30:38
✔ Nuxt files generated                                                                   11:30:38

✔ Client
  Compiled successfully in 8.31s

✔ Server
  Compiled successfully in 7.61s

ℹ Waiting for file changes                                                               11:30:53

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.4.5                            │
   │   Running in development mode (universal)   │
   │   Memory usage: 137 MB (RSS: 237 MB)        │
   │                                             │
   │   Listening on: http://localhost:3000       │
   │                                             │
   ╰─────────────────────────────────────────────╯

ブラウザで「http://localhost:3000」にアクセスします。

f:id:kapiecii:20190322201553p:plain

無事に起動できました。

ページを追加する

/pages/以下にファイルを作成して、ページを追加します。
Vue.js + vue-routerの場合は、router.jsなどを作成して、ルーティングを記載する必要があるのですが、Nuxt.jsでは/pages/以下を編集すれば自動的にルーティング設定をしてくれます。便利！

$ mkdir pages/newpage
$ cp pages/index.vue pages/newpage/

/newpage/index.vueを編集します。
編集が終わったら起動します。

$ npm run dev

「http://localhost:3000/newpage」にアクセスすると、作成したページが表示されました。

f:id:kapiecii:20190322201743p:plain

Vuetifyを使ってみる

create-nuxt-appでプロジェクトを作成する際に、「Use a custom UI framework」でVuetifyを選択してみました。
先程までと同じプロジェクトを作成して、起動します。
Vuetify+Nuxt.jsのテンプレートが使われているようです。

f:id:kapiecii:20190322201843p:plain

element-uiを使ってみる

以前electron-vueを使った際に、element-uiを使ったことがあったので、element-uiも試してみました。
プロジェクト作成時に「Use a custom UI framework」でelement-uiを選択します。
こちらはあまり見た目が変わらないですね。

f:id:kapiecii:20190322201935p:plain

最後に

ルーティング周りや、UI Framework周りで悩む必要がないので、さっと使い始めることができる印象でした。
次はTypeScriptを使えるようにしていきたいと思います。

typescript使ってみよう。そうしよう
— kapiecii (@kapiecii) March 14, 2019