spring bootのscaffoldをするツールです。vueとはangularとか選べます。
https://github.com/jhipster/jhipster-sample-app
https://github.com/jhipster/jhipster-sample-app-react
https://github.com/jhipster/jhipster-sample-app-vuejs
https://github.com/jhipster/jhipster-sample-app-kotlin
https://github.com/jhipster/jhipster-net-sample-app-template
公式ドキュメントには、書いてないところを書き足してみます。
まあ、公式にWindowsでの、入れ方が書いてないということは、ねぇ。Macユーザがつくってるんでしょうね。
https://github.com/gradle/gradle-completion
https://github.com/bmatzelle/gow/releases
VUEも対応するように、なってる。時代の波に乗っていこうとするツールの開発者が感じられる。
気に入ったよ。おれも、ついていこう。
というわけで、インストールしてみる。ちなみに、いまこの記事を書いているバージョンは、6.1.2が最新だ。
進化がはやい。
さて、どこから、手をつけよう。ちょっと、どんなさいとがあるのかしらべてみた。
https://www.jhipster.tech/using-vue/
https://github.com/jhipster/jhipster-vuejs
簡単な手順が書いてある、概念的な説明は乏しい感じがする。
本家サイトの紹介ページ
一番信頼できると思う。
わかりやすそうな、サイト
https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/
npmのプロジェクト
https://www.npmjs.com/package/generator-jhipster-vuejs
https://www.youtube.com/watch?v=Cbtdvp6e36Q
ナマステ、よくわからないが、BGMがわりに、聞いておこう。
上記の、わかりやすそうな、解説サイトを、Googleで翻訳したのを手直して貼ってみる。
以下の記事は、テオレブランさんが、 2019年2月21日 に、
https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/
で紹介した記事の、英語が苦手な人が、翻訳してみたバージョンです。
画像を張るのは、このブログの仕組みでは大変なため、、元の英語のほうの記事をみてくださいね。
Vue.jsはJavascriptフロントエンドの世界における新しいトレンドフレームワークであり、そのシンプルさによってWebアプリケーションをかなり速く構築することができます。
Vue.jsアプリケーションの構造は、ページを構築するためにコンポーネントとテンプレートを使用するという点でAngularアプリケーションと非常によく似ています。このビデオ
https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/
は、特にAngularまたはReactを使用したことがない場合にVue.jsを使い始めるための優れた入門書です。
これは現在人気のあるフレームワークのサイズ比較(縮小)です(詳細はこちら)。
https://gist.github.com/Restuta/cda69e50a853aa64912d
Name | Size |
------------------------ | ----- |
Angular 2 | 566K |
Ember 2.2.0 | 435K |
React 0.14.5 + React DOM | 133K |
React 16.2.0 + React DOM | 97K |
Vue 2.4.2 | 58K |
Inferno 1.2.2 | 48K |
Preact 7.2.0 | 16K |
前にも述べたように、Vue.jsのシンプルさは非常に軽量で他のライブラリや既存のプロジェクトとの統合を容易にします。
一方、Vue.jsは適切なツールを使用して堅牢なシングルページアプリケーションを構築することができ、JHipsterはそれに最適です。
JHipsterに慣れていないのであれば、このビデオ
https://www.youtube.com/watch?v=-VQ_SVkaXbs
を見て、JHipsterで何ができるか、英語ですが、インストールから、わかりやすく解説されています。 (やはりmacユーザですね。)
https://www.jhipster.tech/modules/creating-a-blueprint/
デフォルトでは、JHipsterはフロントエンドフレームワークに対してAngularかReactのどちらかを選択するように求めます。青写真の概念はJHipsterバージョン5で導入されました、そして、目標はあなたがあなた自身のサブジェネレータを使わせることによってJHipsterの機能性を拡張することです。ブループリントを作成して使用する方法に関する詳細情報は、ドキュメント
https://www.jhipster.tech/modules/creating-a-blueprint/
にあります。
フロントエンドの生成には、公式のVue.jsブループリントが使用されています。ブループリントリポジトリ
https://github.com/jhipster/jhipster-vuejs
のインストール手順に従うことができます。私がこのブログ記事を書いた時点でブループリントはまだ開発中だったので、あなたはいくつかの問題に遭遇するかもしれません。あなたが部分が間違った方法でされたと思うならば、それらを報告して、プル要求を提出してください。
まず新しいフォルダを作成し、vuejsブループリントを付けてJHipsterを実行しましょう。
mkdir vuejs-app cd vuejs-app jhipster --blueprint vuejs
質問ごとにデフォルトの回答を選択できます。ブループリントが正しくインストールされていれば、次のメッセージが表示されます。
Using blueprint generator-jhipster-vuejs for client subgenerator ? Which *Framework* would you like to use for the client? (Use arrow keys) > Vue.js
この.yo-rc.jsonは、この記事で参照したのと同じアプリケーションを生成したい場合に使用できます。ファイルはアプリケーションディレクトリに置かれ、それから実行jhipster -d --blueprint vuejsすることはどんな質問もせずにアプリケーションを生成するでしょう。
アプリケーションを起動する前に、3つのエンティティを含む単純なJDLを使用していくつかのエンティティを生成しましょう。このコンテンツを含むentities.jdlアプリケーションのルートフォルダに名前の付いたファイルを作成するだけです。次に、Vue.jsブループリントを使用してコマンドを実行してエンティティを生成します。jhipster import-jdl entities.jdl
./mvnwコマンドを実行してアプリケーションを起動し、http:// localhost:8080 /#/にアクセスして、すべてが正常に機能していることを確認できます。ログインすると、「エンティティ」メニューには以下の3つのエンティティが表示されます。
Vue.jsアプリケーション全体を含むフォルダはsrc/main/webapp/appであり、構造はAngularと非常によく似ています。npm startコードを変更したときにライブコンパイル/リロードの利点を享受するために、端末でコマンドを実行することをお勧めします。AngularやReactと同様に、webpackはTypeScript?コードをJavaScript?にコンパイルしてアプリケーションをパッケージ化するために使用されます。
Vueのインスタンスは、ファイル内に作成されたsrc/main/webapp/app/main.ts、と私は見てお勧めsrc/main/webapp/app/shared/config/config.tsにも。
どちらのファイルも複数のものを構成します。
Vue.jsアプリケーションはすでにさまざまな言語で動作するように設定されており、翻訳を含むフォルダはにありますsrc/main/webapp/i18n。この方法$t()は、ユーザーの言語に基づいてテキストを表示するために使用できます。
テンプレート内:
<h1 class="display-4" v-text="$t('home.title')">Welcome, Java Hipster!</h1>
コンポーネント内(名前パラメータを使用できます)
// "A Operation is updated with identifier {{ param }}" const message = this.$t('blogpostApp.operation.updated', { param: param.id });
Reactと同様に、すべてのルートは1つのファイルに集中化されていますsrc/main/webapp/app/router/index.ts。JHipsterは自動的にエンティティのルートを生成します。
カスタムルートはコメントの後に追加する必要が// jhipster-needle-add-entity-to-router - JHipster will add entities to the router hereあります。これにより、他のエンティティが生成されたときに問題が発生しないようにします。
このフィールドmetaはユーザーの権限をチェックするために使用され、他の変数を渡すために使用することができます。
// This route will only allow users with the "ROLE_ADMIN" authority { path: '/admin/user-management', name: 'JhiUser', component: JhiUserManagementComponent, meta: { authorities: ['ROLE_ADMIN'] } }
フォルダsrc/main/webapp/app/shared/modelにはAngularのモデルなどが含まれています。.vueアプリケーションの「ページ」ごとにテンプレートに関連付けられたコンポーネントがあります。
新しいページを作成するときはカスタムサービス/コンポーネント/テンプレートを作成することをお勧めします。そのため、エンティティを再生成するときに競合を解決する必要はありません。
検証はvuelidateライブラリを使って行われ、使い方は簡単です。エンティティOperationは、カスタム検証がvuelidateを使用してどのように行われるかを理解するための良い例です。OperationUpdate?あなたは以下を参照することができ、コンポーネントは検証オプションが含まれています。
const validations: any = { operation: { date: { required }, description: {}, amount: { required, numeric } } };
@Component({ validations }) export default class OperationUpdate extends Vue { ... }
このファイルoperation-update.vueは検証ルールを使用してカスタム検証メッセージを表示/非表示にします。
<input type="number" class="form-control" name="amount" id="operation-amount" :class="{'valid': !$v.operation.amount.$invalid, 'invalid': $v.operation.amount.$invalid }" v-model="$v.operation.amount.$model" required/> <div v-if="$v.operation.amount.$anyDirty && $v.operation.amount.$invalid"> <small class="form-text text-danger" v-if="!$v.operation.amount.required" v-text="$t('entity.validation.required')"> This field is required. </small> <small class="form-text text-danger" v-if="!$v.operation.amount.number" v-text="$t('entity.validation.number')"> This field should be a number. </small> </div>
重要なオブジェクトは$ vです。これは検証されたフィールドのステータスを取得するために使用できます。
Vue.jsはスムーズな学習曲線を持ち、生産的になるのに必要な時間は非常に短いです。それはAngular / Reactの優れた代替手段であり、それらのフレームワークの経験があると役立ちます。他のフレームワークページとの比較は、Vue.jsがアプリケーションに適しているかどうかを判断するのに役立ちます。
JHipsterは、最新のWebアプリケーションを完成させるために必要なものすべてを提供し、ごく短時間で運用に移すことができます。それに加えて、バックエンドはSpring Bootによる高性能で堅牢なJavaスタックとして構築されています。