nuxtjsをセットアップする

nuxtjsとはなんぞや

NuxtJS

特徴としてはこんな感じでした

• ユニバーサルアプリの開発ができる
• サーバサイドでも動作する
• 静的ファイルを出力できる

とりあえずインストール

作業用ディレクトリとpackageファイル作成

$ mkdir nuxtjs
$ cd nuxtjs
$ npm init
$ yarn add nuxt

package.jsonにscriptsを追記する

...
"scripts": {
   "dev": "nuxt dev",
...

テンプレート用ディレクトリを作成

デフォルトだとpagesというディレクトリがビュー用のファイルを設置する場所になるためディレクトリを作成する。

$ mkdir pages
$ cd pages
$ vi index.vue

index.vue

<template>
<div>
    <h1>Hello Nuxt !!</h1>
</div>
</template>

起動

$npm run dev

起動を行ったら http://localhost:3000 にアクセスするとHello Nuxt !!というものが表示されているはず。

nuxtjsを試すよりもnodejsのバージョンが低かったせいでインストールできず、結局使っていたnodejsを全部消してnodebrewでインストールしました。便利ですねnodebrew!!

普通に白紙の状態からnuxtを構築していくと労力が半端ないようなので次はテンプレートを利用して構築の準備をしていきます。