HatenaPocketLINELINEWebシステムをさっくり作る場合、Vue.js便利ですよね。バージョン3に上がり、JSフレームワーク初心者の私でも、とても楽に環境構築できるようになりました。Vue.jsを触り始めた最初の方は、JSのフレームワークを触るのが初めてだったのもあり、入れるべきモジュールとか全然分からず苦労しました。Scalaを一番最初に触った時以上でしたね。vue-cli3になってからは、プロジェクト生成時にデフォルトでどのモジュールを有効にするかなど、対話形式で進めていけるので初心者にとってとても助かります。vue-uiとかGUIでの管理機能もついたりと順調に機能UPしているので、JSのフレームワークは一時はVue.jsを利用していくつもりです。いっても、仕事ではなく個人でWebシステムを作成する場合、レイアウトとか自分で作らないといけない(デザイン力無いのでこれが一番つらい!)のでCSSフレームワークを使うのですが、最近は「Bulma」がお気に入りです。定番のBootstrapでもいいのですが、コンポーネント系はいまだにjQuery依存なので、「折角Vue.js使ってるのに、jQueryいれるのか。」という微妙な感じになります。4の次バージョンで、jQueryからの脱却するみたいなのでそれは期待ですけど。3でwebpackも4に上がったので、環境構築方法を自分の備忘録もかねて残しておきます。3.2.1なぜBulmaなのかとりあえず、本題に入る前にどうして数あるCSSフレームワークの中でBulmaのCSSフレームワークを選んだのか。JSで組み込まないといけない部分は、Vue.jsで対応すればよい。CLI3のインストールまで済んでいるのが前提です。方は以下記事をご参考ください。...https://kawadev.net/vue-cli3-versionup/#vue-cli-3-0-プロジェクト作成それでは、Vue.jsのプロジェクト作成していきます。vue-bulma-project対話式でどのモジュール等を使っていくかが出てきますので適宜選択して進めていきます。features」を選択します。/Formatterの2つが選択されてます。Pre-processors」は選択。VuexやRouter(vue-router)等必要な場合は適宜選択してください。TestingCSSプリプロセッサは何を使うかの選択肢が出てきますので、ここでは「Sass/SCSS」を選択します。Stylus他の質問は、適宜どのようなシステムを作るかで選択していってください。最後の確認が終わると、インストール処理が走ります。環境にもよると思いますが、1~2分位かと。serveVue.jsの起動確認それでは起動確認します。インストール最後に起動するコマンドが出てますのでその通りに実行します。build.ブラウザでアクセスしてみます。WindowsをインストールしてるのでそのIPが出てますがいったん無視で。起動確認が終わったら、「Ctrl+C」で止めておきましょう。Bulmaの導入Bulmaをインストールし、sassでカスタマイズできるところまで持っていきます。本家サイトのドキュメントはwebpack3ベースなので設定ファイルの場所や一部省けるところもあります。私なりにこれがベストかなという手順で解説します。本家ドキュメント:https://bulma.io/documentation/customize/with-webpack/インストールnpmで配布されているので、コマンド一発です。bulmaインストールが終わると、以下のメッセージが表示されます。3プロジェクトへの組み込みメインとなるsassファイルをimportします。ここでは一旦動作確認しやすいよう、App.vueのsytle部でimportしてます。60px;}</style>この状態で、いったん確認してみましょう。スタイルが変わりましたね。3プロジェクトデフォルトのWelcome表示をBulmaのドキュメント通りに修正してみます。以下のような画面になりました。h1タイトルやコントロールが綺麗になりましたね。問題なくBulmaのスタイルが読み込まれてます。それでは、Sassでカスタマイズしてみます。Fontも適用され、色合い等も無事に変わりました~。BulmaのインポートとSassによるカスタマイズ部はApp.vueで全部やっているので強引ですね^^;個人でちょっとした開発をする分にはこれでも十分ですが、App.vueではなくsassファイルに分割しましょう。Sassファイルに分割それでは、App.vueのstyle部からsassファイルへ移動します。"../node_modules/bulma/bulma.sass";作成したvariables.sassファイルを読み込むためにvue.config.jsを作成します。vue.config.jsファイルは存在しないので、新規作成してください。}}完成!スムーズにいけば、ここまででだいたい5分位です。4になり、前バージョンと比べ各段に導入しやすくわかりやすくなったのではないでしょうか。Bulmaは、1つのcssファイルのみなので、Sassまでいらないなぁという場合はCDNでサクッと組み込んでもいいですし、ドキュメントも充実しててとても素晴らしいCSSフレームワークです。JSでどの環境にも組み込みやすいと思います。あとはテーマがどんどん増えてくれればもっと楽できるなぁ。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスウェブサイトプロフィール福岡でシステムエンジニアをやっています。フリーランスで活動中です。PHP・C#メインにWebシステムやサーバサイド、サーバ構築等が得意です。