はじめに
クリックするとメニューが開いたり閉じたりする機能をVue.jsで実装します。
この記事はrails6でのVue.js導入編です。
また、rails6からはwebpackerが標準装備されてるのでこちらでは省略します。
目次
1.Vue.js導入
2.Vewのインストール
3.ファイルの読む先を指定
4.エラーの解決方法
開発環境
Vue 2.6.12
rails 6.0.0
ruby 2.6.5
実装
それでは実装して行きます〜
1.Vew導入
1.1Vewのインストール
まずはVueインストールします。
rails webpacker:install:vue
hello_vue.js'とapp.vueが自動生成される。
次に、application.html.erbに読み込まれる様に追記します。
<!DOCTYPE html>
<html>
<head>
<title></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
<% ↓下記の二行を追記 %>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> ←①これを追記する
<%= javascript_pack_tag 'hello_vue' %> ←②これを追記する
</body>
</html>
①はVue.jsを読み込ますためで、②はhello_vueというファイルを読むためにのものです。
両方ともbody内に追記します。
すると下記の様に表示されます。
ひとまずVew.jsが使える様になりました。
1.2ファイルの読む先を指定
このままではデォルトなので、個別の新しいファイルで扱える様にします。
<%= javascript_pack_tag 'hello_vue' %>
//下記に変更
<%= javascript_pack_tag 'menu_vue' %>
公式ではhello_vueを読み込む様に指定されますが、これから作るファイル名menu_vueに変更します。
新しいファイルを'menu_vue'の名前で作成します。
var app = new Vue({
el: '#app',
data: {
message: 'こんにちは Vue!' //←違いがわかりにくにで日本語に変換
}
})
<h1>Menus#index</h1>
<p>Find me in app/views/menus/index.html.erb</p>
<% 下記を追記 %>
<div id="app">
<p>{{ message }}</p>
</div>
出来ました！！
ここまでが導入です。
続きはメニューを作成する部分を実装します。
【Veu.js】メニュー機能の実装 実装編 rails6
https://qiita.com/AKI3/items/cd1729a25c9bb83061b9
エラーの対応
Webpacker::Manifest::MissingEntryError
このエラーが出る場合階層が違う場合が多いので、気をつけて新しいファイルを作る必要があります。
場所はpacksの配下です。
それでも解決出来ない場合は、yarnやwebpackerに問題があるかもしれません。
下記の記事も参考にしてみてくださ。
https://qiita.com/masatwork/items/1b5d190cc76f5eeffbb7
https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0
最後に
私はプログラミング初学者ですが、同じ様に悩んでる方々の助けになればと思い、記事を投稿しております。
それでは、また次回お会いしましょう〜
参考
【公式】
https://jp.vuejs.org/v2/guide/