【Vue.js】Vue CLI 3 + BulmaでSPA環境を5分でつくる！

2019/01/312019/02/03

Webシステムをさっくり作る場合、Vue.js便利ですよね。
昨年、vue-cli がバージョン3に上がり、JSフレームワーク初心者の私でも、とても楽に環境構築できるようになりました。Vue.jsを触り始めた最初の方は、JSのフレームワークを触るのが初めてだったのもあり、入れるべきモジュールとか全然分からず苦労しました。 Scalaを一番最初に触った時以上でしたね。。
しかし、vue-cli3になってからは、プロジェクト生成時にデフォルトでどのモジュールを有効にするかなど、対話形式で進めていけるので初心者にとってとても助かります。
vue-uiとかGUIでの管理機能もついたりと順調に機能UPしているので、JSのフレームワークは一時はVue.jsを利用していくつもりです。

とはいっても、仕事ではなく個人でWebシステムを作成する場合、レイアウトとか自分で作らないといけない（デザイン力無いのでこれが一番つらい！）のでCSSフレームワークを使うのですが、最近は「Bulma」がお気に入りです。
定番のBootstrapでもいいのですが、コンポーネント系はいまだにjQuery依存なので、「折角Vue.js使ってるのに、jQueryいれるのか。。。」という微妙な感じになります。 Bootstrap 4の次バージョンで、jQueryからの脱却するみたいなのでそれは期待ですけど。

ということで、私の個人での開発はVue.js+Bulmaの黄金のタッグとなってますが、Vue CLI 3でwebpackも4に上がったので、環境構築方法を自分の備忘録もかねて残しておきます。

Contents

1. 環境
2. なぜBulmaなのか
- 2.1. 良い点
- 2.2. いまいちな点
3. Vue CLI 3＋Bulmaの環境構築
4. まとめ

環境

OS: Windows 10
Node 10.13
Vue CLI 3.2.1

なぜBulmaなのか

とりあえず、本題に入る前にどうして数あるCSSフレームワークの中でBulmaのCSSフレームワークを選んだのか。

良い点

なんてったって、no javascript！
グリッドシステムは、Flexboxを採用
基本的なコンポーネントがデフォルトでそろってる
もちろんSassにも対応しているので、カスタマイズ性もある
ドキュメントも他のCSSフレームワークに比べるとそろってて見やすい気がする（ここ重要）
ドラゴンボール世代としては、なじみのある名前

いまいちな点

サンプルとなるテーマがまだまだ少ない
一部のコンポーネント（ハンバーガーメニューなど）を組み込むには、やっぱりJS書かないといけない
※ JSで組み込まないといけない部分は、Vue.jsで対応すればよい。

良い点が圧倒的です。これだと使わないと損！

Vue CLI 3＋Bulmaの環境構築

Node.jsと、Vue CLI3のインストールまで済んでいるのが前提です。まだの方は以下記事をご参考ください。

【Vue.js】Vue CLI 2.5から3.0へのバージョンアップ

Vue.jsの習得がてら作成した個人事業主向けの各種税金・保険料の計算シミュレーションのVue ClIを2.5か ...

https://kawadev.net/vue-cli3-versionup/#vue-cli-3-0-

プロジェクト作成

それでは、Vue.jsのプロジェクト作成していきます。

$ vue create vue-bulma-project

対話式でどのモジュール等を使っていくかが出てきますので適宜選択して進めていきます。
一番最初は、プリセットをデフォルトですすめるか自分で選択するかですが、ここは自分で選択するために「Manually select features」を選択します。

Vue CLI v3.2.1
┌───────────────────────────┐
│  Update available: 3.3.0  │
└───────────────────────────┘
? Please pick a preset:
  default (babel, eslint)
> Manually select features

デフォルトでは、BabelとLinter /Formatterの2つが選択されてます。
Bulma.cssのカスタマイズはSassを使っていきますので、「CSS Pre-processors」は選択。VuexやRouter(vue-router)等必要な場合は適宜選択してください。

? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
>( ) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

CSSプリプロセッサは何を使うかの選択肢が出てきますので、ここでは「Sass/SCSS」を選択します。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS
  Less
  Stylus

他の質問は、適宜どのようなシステムを作るかで選択していってください。最後の確認が終わると、インストール処理が走ります。環境にもよると思いますが、1～2分位かと。

⚓  Running completion hooks…

📄  Generating README.md…

🎉  Successfully created project vue-bulma-project.
👉  Get started with the following commands:

 $ cd vue-bulma-project
 $ npm run serve

Vue.jsの起動確認

それでは起動確認します。インストール最後に起動するコマンドが出てますのでその通りに実行します。

$ cd vue-bulma-project
$ npm run serve

 DONE  Compiled successfully in 4692ms                   21:25:18

  App running at:
  – Local:   http://localhost:8080/
  – Network: http://10.0.75.1:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ブラウザでアクセスしてみます。
※ちなみに、Networkの方はDocker for WindowsをインストールしてるのでそのIPが出てますがいったん無視で。

問題ありませんね。起動確認が終わったら、「Ctrl+C」で止めておきましょう。

Bulmaの導入

Bulmaをインストールし、sassでカスタマイズできるところまで持っていきます。
ちなみに、vue-cli 3はwebpack 4ですが、本家サイトのドキュメントはwebpack3ベースなので設定ファイルの場所や一部省けるところもあります。
私なりにこれがベストかなという手順で解説します。

本家ドキュメント：https://bulma.io/documentation/customize/with-webpack/

インストール

npmで配布されているので、コマンド一発です。

$ npm install bulma

インストールが終わると、以下のメッセージが表示されます。

+ bulma@0.7.2
added 1 package from 1 contributor and audited 15852 packages in 7.922s
found 0 vulnerabilities

Vue CLI 3プロジェクトへの組み込み

メインとなるsassファイルをimportします。
※ ここでは一旦動作確認しやすいよう、App.vueのsytle部でimportしてます。

src\App.vue

～
<style lang="scss">
@import "../node_modules/bulma/bulma.sass";

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

この状態で、いったん確認してみましょう。

スタイルが変わりましたね。なんとなく成功してそうなので、次はVue CLI 3プロジェクトデフォルトのWelcome表示をBulmaのドキュメント通りに修正してみます。

src\App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1 class="title">
      Bulma
    </h1>

    <p class="subtitle">
      Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
    </p>

    <div class="field">
      <div class="control">
        <input class="input" type="text" placeholder="Input">
      </div>
    </div>

    <div class="field">
      <p class="control">
        <span class="select">
          <select>
            <option>Select dropdown</option>
          </select>
        </span>
      </p>
    </div>

    <div class="buttons">
      <a class="button is-primary">Primary</a>
      <a class="button is-link">Link</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
@import "../node_modules/bulma/bulma.sass";
</style>

修正点

HelloWorldコンポーネントを削除
デフォルトのスタイルを削除

以下のような画面になりました。h1タイトルやコントロールが綺麗になりましたね。問題なくBulmaのスタイルが読み込まれてます。

それでは、Sassでカスタマイズしてみます。

src\App.vue

～
<style lang="scss">
// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

@import "../node_modules/bulma/bulma.sass";
</style>

Google Fontも適用され、色合い等も無事に変わりました～。

BulmaのインポートとSassによるカスタマイズ部はApp.vueで全部やっているので強引ですね＾＾；

個人でちょっとした開発をする分にはこれでも十分ですが、App.vueではなくsassファイルに分割しましょう。

Sassファイルに分割

それでは、App.vueのstyle部からsassファイルへ移動します。

src\variables.sass

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

@import "../node_modules/bulma/bulma.sass";

作成したvariables.sassファイルを読み込むためにvue.config.jsを作成します。
※ vue.config.jsファイルは存在しないので、新規作成してください。

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/variables.sass";`
      }
    }
  }
}

完成！
スムーズにいけば、ここまででだいたい5分位です。

まとめ

vue-cli 3とwebpack 4になり、前バージョンと比べ各段に導入しやすくわかりやすくなったのではないでしょうか。Bulmaは、1つのcssファイルのみなので、Sassまでいらないなぁという場合はCDNでサクッと組み込んでもいいですし、ドキュメントも充実しててとても素晴らしいCSSフレームワークです。no JSでどの環境にも組み込みやすいと思います。
あとはテーマがどんどん増えてくれればもっと楽できるなぁ。

プログラミング,vue.jswebpack

Posted by kawadev