LoginSignup
21

More than 3 years have passed since last update.

Nuxt.js を導入しよう

Last updated at Posted at 2018-11-29

2019.07.19 追記

この導入方法は Nuxt.js ver2.3.x のものになります。
最新(ver2.8.1)の導入方法は こちら を読むといいかもです。

はじめに

社内向けのブログ作るつもりだったので SSR を売りとした Nuxt.js を利用するつもりはなかったのですが、個人的に使っていると Vue CLI 単独で作ってるときよりも作りやすかったので試しに導入してみようと思ったわけです。

Nuxt.js is 何?

公式によると

サーバサイドとクライアントサイドのディストリビューションを抽象化しつつ UI レンダリングすることに焦点を当てています。

Nuxt.js はサーバーサイドレンダリングをもっと楽しめるように Vue.js アプリケーションの開発に必要な設定をあらかじめプリセットしています。

さらに、Nuxt.js はシングルページアプリケーション(spa モード)を手早く作成する際にも使えます。

なフレームワークです!

都合の良いところばかり切り出しましたが、プリセットが強力だったのと SPA が作りやすそうだったので使ってみます!

:link: Nuxt.js - ガイド

Nuxt.js をインストール

コマンドラインから次のコマンドでインストールします。

  • Yarn を使った場合
> yarn create nuxt-app <my-project>
  • npx を使った場合

(npx は NPM 5.2.0 からデフォルトでバンドルされています)

> npx create-nuxt-app <my-project>

インストールと言うよりはプロジェクトを作成する感じになります。

このあといくつか質問がありますので、それぞれ解説します。

Project name

? Project name (my-project)

プロジェクト名を聞かれます。

デフォルトはインストール時にパラメーターで渡したものが表示されますので、大抵の場合はそのまま [Enter] で良いかと。

Project description

? Project description (My priceless Nuxt.js project)

プロジェクトの説明文です。

デフォルトは My priceless Nuxt.js project です。

プロジェクト作成時に自動生成される README.md に記載される内容ですが、あとでいくらでも変更できるので、ここで悩む必要はないと思います。

Use a custom server framework

? Use a custom server framework (Use arrow keys)
> none
  express
  koa
  adonis
  hapi
  feathers
  micro

サーバーサイドのフレームワークを聞かれます。

express と組み合わせる構成はよく見かけますが、Firebase 使いますし、今回は使用しない方向で設定しました。

Use a custom UI framework

? Use a custom UI framework (Use arrow keys)
> none
  bootstrap
  vuetify
  bulma
  tailwind
  element-ui
  buefy

UI フレームワークを聞かれます。(あとで変更可能!)

別記事で Bootstrap 導入していますが、jQuery 使っているので Vue と相性が悪い気がして…

今回は bulma にしてみました!

(ある程度使ったら記事にするつもりです!)

Choose rendering mode

? Choose rendering mode (Use arrow keys)
> Universal
  Single Page App

ユニバーサルアプリケーションとシングルページアプリケーションのどちらで作るか聞かれます。

作るアプリに合わせて選択したら良いですね。

私の場合は SPA で!

Use axios module

? Use axios module (Use arrow keys)
> no
  yes

axios を利用するかどうか聞かれます。

axiosPromise ベースの戻り値を得ることができる HTTP クライアントです。

API 利用時などはコーディングがかなり簡単になるので入れておけば良いかと。

Use eslint

? Use eslint (Use arrow keys)
> no
  yes

ESLint を利用するかどうか聞かれます。

コーディングスタイルを統一するのに便利だから入れておけばいいかと。

Use prettier

? Use prettier (Use arrow keys)
> no
  yes

Prettier を利用するかどうか聞かれます。

Prettier は今話題のコードフォーマッターらしいのですが、使ったことないです。

リントツールである ESLint と機能がかぶる部分もありますがコードフォーマッター部分を連動させたりすることも出来るらしく、今回は入れて使ってみようと思います。

Author name

? Author name (kurararara)

作成者名を聞かれます。

Choose a package manager

? Choose a package manager (Use arrow keys)
> npm
  yarn

パッケージマネージャーに npmyarn のどちらを使うか聞かれます。

Please wait a minute...

この後、プロジェクト作成が行われ、

  To get started:

    cd my-project
    yarn run dev

  To build & start for production:

    cd my-project
    yarn run build
    yarn start

Done in 2075.80s.

とメッセージが出たら作成完了です!

起動してみよう!

完了メッセージにあったように、作成されたプロジェクトに移動して、起動コマンドを入力してみましょう。

  • Yarn を使った場合
> cd my-project
> yarn run dev
  • npm を使った場合
> cd my-project
> npm run dev

起動したら…

<my project path>/pages/index.vue
  36:1  error  Delete ``  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

って、えっ??

さっそく prettier が頑張りました。

インストール時に選択できるパターンくらいはエラーにならないようにしておいてほしいよな…

index.vue の <style> タグ直下の空行を削除すればエラーは消えました。

pages/index.vue
<style>
            /* <= この空行が駄目らしい */ 
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 中略 */

</style>

修正が終わったら

» pages\index.vue

√ Client
  Compiled successfully in 422.30ms

エラー解消して起動が完了しています。

気を取り直して http://localhost:3000/ にアクセスです!
nuxtjs.png
いえい!

まとめ

Vue CLI のときにも書きましたが、プロジェクト作成から起動までの速度がかなり早いです!

初めて触れるプログラミング言語って、ブログとか記事は読むけどなかなか手を動かすところまではいけないんですよね~

実際のところ、読んだだけじゃ全然身になってないんですけどね(汗)

Nuxt.js の導入は難易度も高くなくすぐにアプリ起動までだどりつけますので、騙されたと思って起動までやってみるとモチベーションアップに繋がるかも?!

同じ文章の使い回しすんません

インデックスページから来た人向け

思いっきし軌道修正(というか方向修正) しちゃいましたが、色々なことに触れて少しずつ進めていきますので、よかったら他の記事も見てみてください!

:link: Vue.js 初心者がなにか作りきってみる(願望)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21