BETA

【Sinatra】手探りでBootstrapVueを導入してみる

投稿日:2019-09-21
最終更新:2019-10-08

SinatraにVue.jsを導入してる方の記事のほとんどがアプリのSPA化のためだったのですが、私はシンプルにVue.jsをフロントとして使いたいと思い、BootstrapVueを導入してみます。
(手探りなので間違えてたりしたら指摘して頂けるとありがたいです。)

Sinatraの各種設定は各自で済ませて下さいませ~

*参考
https://bootstrap-vue.js.org/docs

headタグの編集

BootstrapVueを導入するだけならやることは少なそうです!

まず、layout.erb ファイルを作成します。

layout.erb

<!DOCTYPE html>  

<html>  
<head>  
<meta charset="utf-8" />  
<!--[if IE]>  
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  

<![endif]-->  

<base href="/">  
<title>sinatra1_study</title>  
<link rel="stylesheet" href="/css/test.css" type="text/css" >  
<script src="http://vuejs.org/js/vue.min.js"></script>  
<!-- Load required Bootstrap and BootstrapVue CSS -->  
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />  
<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.min.css" />  

<!-- Load polyfills to support older browsers -->  
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>  

<!-- Load Vue followed by BootstrapVue -->  
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>  
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>  
</head>  
<body>  

  <%= yield %>  

</body>  
</html>  

headタグに https://bootstrap-vue.js.org/docs よりコピーしてきたURLを張り付けます!それだけです!

保存ボタンを作ってみる

せっかくなので保存フォームを作ってレコードに保存してみましょう!

*参考
大部分を参考にさせてもらいました!
https://qiita.com/ms2sato/items/901d8c5ca77c1133522c

new.erb

<form method="post" action="/user/create">  
    <label for="exampleInputEmail1">名前</label>  
        <div class="form-row">  
            <div class="col">  
                <input type= "text" name="user[name]" class="form-control" placeholder="名前">  
            </div>  
        </div>  
    <label for="exampleInputEmail1">メールアドレス</label>  
        <div class="form-row">  
            <div class="col">          
                <input type= "text" name="user[email]" class="form-control"  placeholder="メールアドレス">  
            </div>  
        </div>  
        <div class="form-row">  
            <div class="col">   
                <label for="exampleInputEmail1">パスワード</label>  
            </div>  
        </div>  
        <input type= "text" name="user[password]" class="form-control"  placeholder="パスワード">  
        <input type= "submit" value="作成" button type="button" input type= "submit" class="btn btn-secondary">  
</form>  

こんな感じになりました!
作成したモデルのカラムとerbファイルを擦り合わせて、、、保存もできました!

まとめ

意外と簡単にBootstrapVueは導入できました!
Vue側での検証作業等も盛り込んでみたいんで、そのうち記事を公開する予定です!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

初学者の成長が垣間見れます

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!