Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including whim-client-vue with all npm packages installed. Try it out:

require("vue/package.json"); // vue is a peer dependency. var whimClientVue = require("whim-client-vue")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

whim-client-vue v1.2.11

whim-client-vue

npm version github workflow MIT License

概要

wh.im 上でゲームの開発が簡単にできます。Vue.js用です。

whim-clientのインストール

以下のコマンドでVue.jsのプロジェクトに追加します。

$ npm install --save whim-client-vue
# or
$ yarn add whim-client-vue

main.jsでのwhim-clientの読み込み

main.jsを以下のような構成にします。

import Vue from "vue";
import App from "./App.vue";
import whimClientVue from "whim-client-vue";
import "whim-client-vue/dist/whim-client-vue.css";

Vue.config.productionTip = false;
Vue.use(whimClientVue);

new Vue({
  render: h => h(App)
}).$mount("#app");

1. whim-client-vueの読み込み

import whimClientVue from "whim-client-vue";
import "whim-client-vue/dist/whim-client-vue.css";

2. vueにライブラリの登録

Vue.use(whimClientVue);

whim-clientの使用例

this.$whimでVue.js上からwhimのデータの読み出し/書き込みができるようになります。

// user一覧の取り出し
this.$whim.users;

// stateの取り出し
this.$whim.state;

// stateの差分更新
this.$whim.assignState({point: 2})

// stateの全更新
this.$whim.resetState({phase: "start"})

より詳細にはAPI一覧をご覧ください。

サンプルアプリ

サンプルアプリをいくつかご用意しました。参考にしてください。

開発の仕方

  1. リポジトリをクローン
  2. 本リポジトリでyarn link
  3. appsでyarn link whim-client-vue
  4. 初回&ソースコード変更のたびにyarn build
  • これを自動watchする方法はありそう。

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free