Nuxt.js触りたくなった

https://ja.nuxtjs.org/

起こったこと

試しにtodoアプリでも作ろうかな〜と思いプロジェクトを作成

プロジェクトの作成

$ npx create-nuxt-app nuxt-todo
npx: 379個のパッケージを9.455秒でインストールしました。
> Generating Nuxt.js project in /Users/aroma/work/nuxt-todo
? Project name nuxt-todo
? Project description todo app
? 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 bootstrap
? Use a custom test framework none
? Choose rendering mode Single Page App
? Author name aromanokarisu
? Choose a package manager npm

プロジェクトを起動

$ cd nuxt-todo
$ npm run dev

ストアを確認してみようと、ドキュメントの通り store/index.js を作ってもストアが有効化されなかった。
https://ja.nuxtjs.org/guide/vuex-store/

ストアの有効化_./store/index.js作成

$ vim ./store/index.js
$ cat ./store/index.js
import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      counter: 0
    }),
    mutations: {
      increment (state) {
        state.counter++
      }
    }
  })
}

export default createStore
$

ストアの有効化_ストア使用

$ vim ./pages/index.vue
$ cat ./pages/index.vue
<template>
  <button @click="$store.commit('increment')">{{ $store.state.counter }}</button>
</template>
$

http://localhost:3000/
→ Cannot read property 'state' of undefined
stateが未定義...??

結論

アプリを終了して、またnpm run dev やり直したら動いた...。
有効化したら再起動はよくある話だけど、ちょっとハマってしまった。

前回の記事"Vue.jsで画像を一覧表示する(vue入門)"でVueについて記載したが、ここではVueとCordovaを使ったAndroidアプリ開発について記す。

Cordovaプロジェクト作成

以下のようなコマンドでプロジェクト(ここでは前回と同じ"my-project")を作成する。
事前にAndroid Studioをインストールして、デバッグできる環境を用意しておく。

# vue cli 3.0のインストール (インストール済みなら不要)
yarn global add @vue/cli

# プロジェクト"my-project"作成
vue create my-project

# cordovaのセットアップ（以前の記事(*)の続きの場合はここから）
cd my-project\
vue add cordova
# ここで質問されるため、デフォルトのまま以下のように回答した（適宜変更する）
# ? Name of folder where cordova should be installed src-cordova
# ? ID of the app com.vue.example.app
# ? Name of the app VueExampleAppName
# ? Select Platforms: Android, iOS, Browser, OSX
# 対応するプラットフォームとして全て(Android, iOS, Browser, OSX)のものを選択した。

(*1) Vue.jsで画像を一覧表示する(vue入門)

デバッグ

デバッグはUSB接続したAndroid端末のアプリからHTTPでPCに接続することで行う。以下のコマンドでデバッグ用のAPKを作成し、Android端末にインストールするとともに、PCにWebサーバを立ち上げる。

npm run cordova-serve-android

画面表示はHTTPが利用されており、PCがWebサーバーとなり画面を提供する。PCにウイルス対策ソフトなどでファイヤーウォールが入っている場合は、該当するポートを開く必要がある。開いているポート(URL)は、cordova-serve-android の処理の中で次のように表示される。ここでの例では8080ポートにPCの外部(Androidスマホ)からアクセスできる必要がある。また、AndroidスマホがPCと同じLANに接続されていることに注意する。

App running at:
  - Local:   http://localhost:8080 
  - Network: http://192.168.100.135:8080

PCのChromeを立ち上げ、 chrome://inspect とURL部分に入れると、DevToolsの画面が開き、この中の"Remote Target" に表示されているアプリ（ここでは"my-project"）の下にある"inspect"という文字をクリックすることで新しいウインドウが開き、デバッグ画面が表示される。コンソールの内容が表示されるなど、デバッグ方法はWebアプリとよく似ている。

APKの作成

npm run cordova-build-android

でAndroid Studioで読み込めるプロジェクトフォルダ(/src-cordova/platforms/android)が生成される。
署名つきAPKをAndroid Studioで作成すれば、任意の端末にもインストールできるAPKができる。

まとめ

Webアプリ開発の知見であれば、比較的簡単にスマートフォンアプリが開発できることがわかった。

これは何

Vue.Draggable というライブラリを使って、リストを並び替えをする実装をしてみた。
そこで、アニメーションのオプションをつけると、見た目もそれっぽく動いてくれるのでその方法を記録しておく。
公式： https://github.com/SortableJS/Vue.Draggable

動作こんな感じ

インストール

npm i -S vuedraggable

yarn とか CDN での導入方法などは公式ドキュメントを参考にしてください。

コード

            <draggable v-model="keywordList" class="keyword-list"
                       :animation="200">

                <div class="keyword" v-for="(keyword, index) in keywordList">
                    <span class="keyword-name">
                       {{ keyword }}</span><span class="icon-remove"
                </div>
            </draggable>

classは見た目整えるだけなので無視してください。

draggableの動作のために重要なのは。v-forで回すリスト（ここではkeywordList）と、v-modelで指定する変数を合わせる、くらいで難しいことはありません。

アニメーションについて

オプションはdraggableのタグに直接つければOK。

参考： https://github.com/SortableJS/Vue.Draggable#All-sortable-options

Sortable options can be set directly as vue.draggable props since version 2.19.

古いバージョンだと以下のように:optionsで指定してようです（古いブログなどを参考にする場合には注意が必要）

:options="{handle:'.handle'}"

前提

Docker version 18.09.2
docker-compose version 1.23.2
npm 6.9.0

参考サイト
laradock と nuxt で開発環境構築
Laravel+Nuxt.js
LaravelとNuxt.jsを同一レポジトリで管理するときの構成
Laravel に Nuxt.js プロジェクトを入れたい

Laradockの構築

Laradockをインストール用のディレクトリの作成

mkdir guild-test-environment

Laradockのプロジェクトをクローンする

cd guild-test-environment/
git clone https://github.com/Laradock/laradock.git

作成したディレクトリに移動

cd laradock/

.envファイルを作成する

cp env-example .env

docker-compose.ymlを編集し、Nuxt用のポートをマッピングする

ports:
        - "${WORKSPACE_SSH_PORT}:22"
        - "3000:3000"

.envファイル開発環境の構築をするのでルートディレクトリではなく以下のように変更を行う。

- DATA_PATH_HOST=~/.laradock/data
+ DATA_PATH_HOST=.laradock/data

Dockerコンテナを立ち上げる

docker-compose up -d nginx mysql workspace

指定のDockerコンテナが立ち上がる

Creating volume "laradock_mosquitto" with local driver
Recreating laradock_mysql_1            ... done
Recreating laradock_docker-in-docker_1 ... done
Recreating laradock_workspace_1        ... done
Recreating laradock_php-fpm_1          ... done
Recreating laradock_nginx_1            ... done

workspaceコンテナ内に入る

docker-compose exec workspace bash

※ ちなみにコンテナから抜けるには、Ctrl + P + Q

laravel プロジェクト作成

workspaceに入ったままlaravelプロジェクトをインストール

composer create-project --prefer-dist laravel/laravel {プロジェクト名}

インストール結構時間かかる。。。

.envファイルを編集する

#before
# APP_CODE_PATH_HOST=../
#after
APP_CODE_PATH_HOST=../{プロジェクト名}

(option)
#before
#MYSQL_DATABASE=default
#MYSQL_USER=default
#MYSQL_PASSWORD=secret
#after
MYSQL_DATABASE=hogehoge
MYSQL_USER=develop
MYSQL_PASSWORD=develop

dockerを立ち上げ直す

docker-compose up -d nginx mysql workspace

立ち上がって、laradockフォルダと同じ階層にLaravelプロジェクト名のディレクトリができていたらOK!!

TODO
php artisan maigrationの実行を入れる

Nuxtのインストール

LINK

Nuxt公式で展開してるtemplateにする
LaravelProjectの直下のclientディレクトリに配置

npx create-nuxt-app guild-test/client


初期設定で色々聞かれるのでとりあえず下記で設定

? Project name client
? Project description My ace Nuxt.js project
? Use a custom server framework none
? Choose features to install Linter / Formatter, Prettier, Axios
? Use a custom UI framework buefy
? Use a custom test framework jest
? Choose rendering mode Universal
? Author name 
? Choose a package manager npm

package.json と nuxt.config.jsの編集

package.json

laravel プロジェクトを作成した際に作られた package.json は捨てて、
nuxt の方と入れ替える。

$ rm package.json # laravelインストール時に生成された方を削除
$ mv ./client/package.json package.json #nuxtの方と入れ替える

nuxt.config.js

$ mv ./client/nuxt.config.js nuxt.config.js

内容編集

module.exports = {
  ~ 省略 ~
  build: {
    ~ 省略 ~
  },
  srcDir: './client',　　　　<- nuxt プロジェクトディレクトリパス
  watchers: {                     <- nuxt コマンドでホットリロードを有効にするため
    webpack: {
      poll: true
    }
  }
}

パッケージをnpmでインストール

npm install

完了後にpackge.jsonの編集を行う
なぜ必要なのかは要調査

{
  "name": "guild-test-nuxt",
  ~ 省略 ~
  "scripts": {
    "dev": "nuxt",                                                  <- before
    "dev": "HOST=0.0.0.0 PORT=3000 nuxt",     <- after
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  ~ 省略 ~
}

開発者モードで起動

npm run dev

> client@1.0.0 dev /var/www/guild-test
> HOST=0.0.0.0 PORT=3000 nuxt

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

✔ Client
  Compiled successfully in 17.35s

✔ Server
  Compiled successfully in 15.14s

ℹ Waiting for file changes                                                                                                                           13:38:05

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

LaravelのAPIからHellowoaldを取得する

client/pages/index.vue

<template>
  <div>{{ data }}</div>
</template>
<script>
export default {
  async asyncData({ app }) {
    const data = await app.$axios.$get('/api')
    return { data }
  }
}
</script>

routes/api.php

//APIテスト用
Route::get('/', function(){ return 'helloworld';});

プロキシモジュールを追加

npm i @nuxtjs/proxy

/nuxt.config.js

module.exports = {
  modules: [
    '@nuxtjs/proxy'
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: '/'
  },
  proxy:{
    '/api' : "http://localhost:8000"
  }
}

workspaceコンテナ内でNuxt/Laravelサーバを立ち上げる

npm run dev
php artisan serve

画面にhelloworldが出てるはず