takeda_san’s blog

KotlinとVRを頑張っていく方向。

WebJarsを初めて使った

WebJarsってなんやねん

jsとかcssとかのライブラリをMavenとかGradle経由でJar形式で取得できるやつ。
Node.jsとかnpmとかよくわからない、自分向け。
なんかどこのライブラリ、フレームワークもいきなりnpmとか出てくるんだもの。

使い方(Maven編)

今回は世間ではよく使われているっぽいvue.jsとElementっていうコンポーネントライブラリを使ってみる。
Springとthymeleafだけだとカレンダーとかよく使われているコンポーネントがなくて、ナウいフォームアプリケーションが作れなかったので…

pom.xml

まず、公式に行って使いたいフレームワークなり、ライブラリを検索する。
(右上のほうに検索窓があります)

https://www.webjars.org/

んで、お目当てのものが見つかったら、[Build Tool]の欄から[Maven]を選択する。
んで、その下のXMLをまるっとpom.xmlにコピー。

f:id:takeda_san:20171220224556p:plain

こんな感じ。

HTML

ほぼ、ここを丸写し。

WebJars の利用 · GitBook

んで、普通のHTMLとだいたい同じなんだけれども、Thymeleafだと@{ほげほげ}で囲った形で、jsファイルを読み込む。
cssファイルも同じかなぁと思ったんだけど@{ほげほげ}で囲むとなぜか読み込まなかったので、普通に書く。 12/21 追記:これhrefの属性にthつけ忘れてますね…うわ恥ずかし。

あとは、参考サイトの通り。

バージョン表記をなくすとこうなる。

無事Elementのコンポーネントが表示されたぞ!やったー。
f:id:takeda_san:20171220230107p:plain