広告

WindowsでいきなりNuxt.jsに入門してみる

JavaScript WEBシステム開発

Nuxt.jsはVue.js製ユニバーサルJavascriptアプリケーションフレームワーク。
Vueから学ぶべきだろうけど必要に応じてって感じで！

必要なもの

node.js
https://nodejs.org/からダウンロード＆インストール。

C:\vue>node --version
v8.11.2

C:\vue>npm --version
5.6.0

Nuxtプロジェクト作成

C:\vue>vue --version
2.9.3

vue-cliがインストールされていなければグローバルにインストールする。

npm install -g vue-cli

Nuxtスターターテンプレートを使ってプロジェクトを作成

C:\vue>vue init nuxt-community/starter-template nuxt-sample
-----
   To get started:

     cd nuxt-sample
     npm install # Or yarn
     npm run dev
-----
C:\vue>cd nuxt-sample
C:\vue\nuxt-sample>npm i
C:\vue\nuxt-sample>npm run dev

http://localhost:3000

※終了するときは「Ctrl+c」ね

Nuxtでカウントアップのサンプル

せっかくなので動作確認を兼ねてカウントアップ/ダウンのサンプルを作る。

【Vuexで状態管理するストア作成】

記述方法にモジュールモードとクラシックモードが存在するが今回はモジュールモードで！

store/conter.js

export const state = () => ({
  count: 0
})

export const mutations = {
  up (state) {
    // カウントアップ
    state.count += 1
  },
  down (state) {
    // カウントダウン
    state.count -= 1
  }
}

state 使用するデータを定義
mutations stateを更新するためのメソッドを定義

他にもデータを更新するメソッドを定義するactionsなど・・・

【ページ追加】

pages/sample/index.vue

<template>
  <section class="container">
    <h1>Nuxt Sample</h1>
    <div>
      <h2>Hello</h2>
      <p>{{msg}}</p>

      <h2>カウントアップ/ダウン</h2>
      <p class="count">{{count}}</p>
      <button @click="countUp">＋</button>
      <button @click="countDown">－</button>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello, Nuxt!'
    }
  },
  computed: {
    count() {
      // stateの呼び出しは this.$store.state.[JSファイル名].[プロパティ]
      // [JSファイル名]はindexなら省略可。
      return this.$store.state.counter.count
    }
  },
  methods: {
    countUp (e) {
      // メソッドの呼び出しはthis.$store.commit('[JSファイル名]/[メソッド名]')
      // 「[JSファイル名]/」はindexなら省略可。
      this.$store.commit('counter/up')
    },
    countDown (e) {
      this.$store.commit('counter/down')
    }
  }
}
</script>

<style>
.count {
  font-size: 48px;
}
</style>

※export default文

data() データを定義
computed: 算出プロパティを定義
methods: メソッドを定義

他にも
mounted()やcomponentsがあるがまたの機会に・・・

http://localhost:3000/sample/

build&startでプロダクションモード

開発モード（npm run dev）で動かしてきたが最終的にはビルドしてプロダクションモードで立ち上げる。

アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします

C:\vue\nuxt-sample>npm run build

プロダクションモードでサーバーを起動します

C:\vue\nuxt-sample>npm run start

静的ファイルに書き出す

C:\vue\nuxt-sample>npm run generate

distディレクトリ以下に静的ファイルが生成される。

SPA（SinglePageApplication）

nuxt.config.jsに追記

  /*
  ** Build mode
  */
  mode: 'spa',
C:\vue\nuxt-sample>npm run build
C:\vue\nuxt-sample>npm run start

よくわからないままやってみたけど
こんな感じね！