Vue.js でウィジェットっぽいものを作ってみる (仮)

こんな感じのウィジェットっぽいものを、Vue.js と Veux の学習を兼ねて作ってみようかと。今回は Qiita の Vue.js タグを表示するもの。

以下、備忘録。

vue-cli

vue-cli の Webpack テンプレートを使用してプロジェクトを作成する。

npm install -g vue-cli

最小構成でやるのでテストとかはないです。

vue init webpack vue-widget-sample
cd vue-widget-sample
npm install

es6-promise

IE 対応のため、es6-promise をインストール。IE では Promise が使えない。

npm install --save es6-promise

src/main.js の先頭に以下を追加。

import 'es6-promise/auto'

Vuex

本家サイト(ja) と GitHub の examples を参考に実装。当初、下図が全然ピンと来ていなかったのですが、コードを書いてみてようやく理解できてきました。(たぶん)

ドキュメントに書いてありますが、小規模なアプリであればイベントバスで十分かもしれません。もしくは、props だけでイケるかもしれません。が、ある程度は規模に関係なく Vuex は導入してよいかと思います。このアーキテクチャに沿うことで全体的にシンプルに書けるようになると感じています。

あと、以下が参考になりました。

chibinowa.net

ウィジェット化

こんな感じで読み込む。このあたりはまだ改善の余地あり...。

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>vue-widget-sample</title>
  <style type=text/css>
    .my-widget {
      width: 360px;
      height: 400px;
    }
  </style>
  <link href="/css/app.css" rel="stylesheet">
</head>
<body>
  <div id=app></div>
  <script type="text/javascript" src="/js/manifest.js"></script>
  <script type="text/javascript" src="/js/vendor.js"></script>
  <script type="text/javascript" src="/js/app.js"></script>
</body>
</html>

これからやりたいこと

Webpack で出力するファイルをまとめる
ウィジェットにパラメータを渡せるようにする
任意のタグ/キーワードで表示できるようにする