[JAVA] [Vue.js] Implementation of menu function Vue.js introduction rails6
Introduction
Vue.js implements the ability to open and close menus when clicked.
This article is an introduction to Vue.js in rails6. Also, since rails6 comes standard with webpacker, we will omit it here.
table of contents
- Introducing Vue.js
- Install Vew
- Specify where to read the file
- Error resolution
Development environment
Vue 2.6.12 rails 6.0.0 ruby 2.6.5
Implementation
Let's implement it ~
1. Vew introduction
1.1 Installing Vew
First, install Vue.
Terminal
rails webpacker:install:vue
hello_vue.js' and app.vue are automatically generated.
Next, add it so that it will be loaded in application.html.erb.
app/views/layouts/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 %>
<%↓ Add the following two lines%>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>← ① Add this
<%= javascript_pack_tag 'hello_vue' %>← ② Add this
</body>
</html>
① is for reading Vue.js, and ② is for reading a file called hello_vue.
Both are added in the body.
Then it will be displayed as below.
You can now use Vew.js for the time being.
1.2 Specify where to read the file
Since it is a dead as it is, we will make it possible to handle it with a separate new file.
app/views/layouts/html.erb
<%= javascript_pack_tag 'hello_vue' %>
//Changed to below
<%= javascript_pack_tag 'menu_vue' %>
Officially, it is specified to read hello_vue, but change it to the file name menu_vue to be created.
Create a new file with the name'menu_vue'.
app/javascript/packs/menu_vue
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!' //← Converted to Japanese because the difference is difficult to understand
}
})
html:app/views/menus/index.html.erb
<h1>Menus#index</h1>
<p>Find me in app/views/menus/index.html.erb</p>
<%Add the following%>
<div id="app">
<p>{{ message }}</p>
</div>
it is complete! !!
This is the introduction. The continuation implements the part that creates the menu.
[Veu.js] Implementation of menu function Implementation version rails6 https://qiita.com/AKI3/items/cd1729a25c9bb83061b9
Error handling
Webpacker::Manifest::MissingEntryError
If you get this error, the hierarchy is often different, so you need to be careful when creating a new file.
The location is under packs.
If that doesn't work, there may be a problem with yarn or webpacker. Please also refer to the following article. https://qiita.com/masatwork/items/1b5d190cc76f5eeffbb7 https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0
Finally
I am a beginner in programming, but I am posting an article in the hope that it will help people who are similarly troubled.
See you next time ~
reference
【official】 https://jp.vuejs.org/v2/guide/
https://www.petitmonte.com/ruby/rails-vuejs-project.html
https://off.tokyo/blog/%E6%97%A2%E3%81%AB%E5%8B%95%E3%81%84%E3%81%A6%E3%82%8Brails%E3%81%ABvue-js%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B/
Recommended Posts