vue製のslide show frameworkのeagle.jsを試す

eagle.js

vueで実装されたslide show framework。

公式のdemoはこちらから確認できる。

できあがりイメージ

ひとまずこれ。最低限で動かすには、にフォーカスした。

ソース一式はgithubにあげている。
https://github.com/abcb2/eagle-sample

@vue/cli-service

どうbuildすればよいのだろうかと思ったが、cli-serviceを使うとちょうど良いコマンドが提供されていることがわかった。

ビルドする時に下記のようなエラーが出たが、他の記事で対応策が書かれていてwebpackのconfigに書けばよいとのことだった。

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

vue.config.jsに下記の通り記述している。@vue/cli-serviceが拾ってくれるっぽい。

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
  },
};

所感

public/index.htmlの中のhead内でanimate.cssを読み込んでいる所とかはどうだろうかと思ったりもしたけれど、あまり元の公式demoから崩したくなかったのでひとまずそれでいいやと。

ふんわりとvueのことが分かったのは良かった。