最近、Vue.jsを使ってクライアント開発をしています。
忘備用に、開発環境のメモを残しておきます。
公式サイト
開発ツール
- Atom 開発環境。フリーです。プラグインが豊富です。
- Visual Studio Code 開発環境。Microsoft社製ですがフリーです。Atomより軽量に感じます。コンソール・日本語対応等もよい。当初こちらを使っていたのですが、私の会社の環境ではなぜかプラグインフォルダが消えてしまう不具合があってAtomに乗り換えました。個人的にはとても気に入っています。
- Vue.js DevTools Chrome、Firefox用のプラグイン。Vueで管理するdataやコンポーネントの構成、イベントを見ることができるので便利です。
- Vue-cli Vueのプロジェクトテンプレートを用意してくれるツール。ただ私が使ったときは入るコンポーネントが古かったため、後でバージョンを手動で変更しました。
コンポーネント
- Vuex 状態管理用ライブラリ。Vue純正。1画面に複数コンポーネントを配置するときに、コンポーネント間で共通のデータを配置するとともに、ここでサーバとの通信を行います。
-
ElementUI Vue用のGUIコンポーネント集。Bootstrapよりリッチです。コンポーネントはきれいだし、Validationも高機能。ただ、カスタマイズするにはそれなりの知識と調査がいります。公式サイトのサンプルをよく読みましょう。
- ElementのValidationの使い方はasync-validatorを参照する 業務用だとValidation(入力チェック)は必須だと思いますが、このサイトにあるように、公式サイトのドキュメントでは情報が不足しています。AsyncValidatorのサンプルなど、様々なサンプルを読むことが理解のために大切だと思います。
- BootstrapVue Vue用のBootstrap。CSSライブラリとあるように、レイアウトや装飾中心です。
- 他にも、Veutify、 Quasar、Vuestrapなどがあるようですが、試していません。