Vue.jsアプリフォルダのツリー構造は以下のようになっています。これは、こちらの記事でVue CLIのcreateコマンドを使って作成した場合のデフォルトの状態です。Beufyを使えるようにするためにmain.jsを少しだけ追記します。
どのような見た目のコンポーネントが用意されているかは、以下の公式サイトに載っています。入力フォームのパーツはもちろん、BoostrapのようなグリッドレイアウトもBulmaのものを引き継いでおり使えるようです。
Beufyをアプリ全体で使えるようにするために、main.jsに以下の通りimportを追記します。これでBeufyを使用できるようになります。
なお、上記では、Beufyのすべてのコンポーネントをインポートして使えるようにしています。実際に本番環境で運用する場合は、必要なコンポーネントのみをそれぞれインポートして使うことが公式ドキュメントでも推奨されています。例えば、以下のようにそれぞれ指定してインポートします。
そこで、Beufyでもmarginやpaddingを付与するクラスを使えるようにするために、例えば以下のようなscssを追加しておくことができます。以下のコードはこちらAdd GitHubを参考にしました。なお、以下は各コンポーネントファイル(例えば、Home.vueなど)に直接追記して使用します。
あとは以下のように好きな要素で以下のようにクラスを追加することで使用できます。
あとは公式ドキュメントに記載されている色々なコンポーネント用のタグやクラスを使うことでお手軽に綺麗な見た目に変更することができます。以下の公式ドキュメントにコンポーネントのコードが記載されています。