【Vue.js】메뉴 기능의 구현 Vue.js 도입편 rails6
소개
클릭하면 메뉴가 열리거나 닫히는 기능을 Vue.js에서 구현합니다.
이 기사는 rails6의 Vue.js 소개 편입니다.
또한 rails6에서는 webpacker가 표준 장비되어 있으므로 여기에서는 생략합니다.
목차
1.Vue.js 도입
2.Vew 설치
3. 파일을 읽을 위치 지정
4. 오류 해결 방법
개발 환경
Vue 2.6.12
rails 6.0.0
루비 2.6.5
구현
그럼 구현해 가겠습니다~
1.Vew 도입
1.1Vew 설치
먼저 Vue 설치합니다.
터미널rails webpacker:install:vue
hello_vue.js' 및 app.vue가 자동으로 생성됩니다.
다음에, 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 %>
<% ↓下記の二行を追記 %>
<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 파일을 읽을 위치 지정
이대로는 디올트이므로, 개별의 새로운 파일로 취급할 수 있도록(듯이) 합니다.
app/views/layouts/html.erb
<%= javascript_pack_tag 'hello_vue' %>
//下記に変更
<%= javascript_pack_tag 'menu_vue' %>
공식적으로는 hello_vue 를 읽어들이도록(듯이) 지정됩니다만, 앞으로 만드는 파일명 menu_vue 로 변경합니다.
새 파일을 'menu_vue'라는 이름으로 만듭니다.
app/javascript/packs/menu_vuevar app = new Vue({
el: '#app',
data: {
message: 'こんにちは Vue!' //←違いがわかりにくにで日本語に変換
}
})
app/views/menus/index.html.erb<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
htps : // 이 m/아키 3/이고 ms/cd1729아 25c9~b83061b9
오류 대응
Webpacker::Manifest::MissingEntryError
이 에러가 나오는 경우 계층이 다른 경우가 많기 때문에, 조심해 새로운 파일을 작성할 필요가 있습니다.
위치는 packs의 부하입니다.
그래도 해결할 수 없다면 yarn이나 webpacker에 문제가있을 수 있습니다.
아래의 기사도 참고해 보세요.
htps : // 이 m / 확실히 rk / ms / 1b5d190c76f5 에 fb7
htps : // 이 m / 나이키 시무라 / ms / 8203f74f8dfd5f6b87 A0
마지막으로
저는 프로그래밍 초학자입니다만, 똑같이 고민하고 있는 분들의 도움이 된다고 생각해, 기사를 투고하고 있습니다.
그럼 또 다음에 만나요~
참고
【공식】
htps : // jp. 아 js. rg/v2/구이데/
Reference
이 문제에 관하여(【Vue.js】메뉴 기능의 구현 Vue.js 도입편 rails6), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/AKI3/items/e87203c590322c908946
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Vue 2.6.12
rails 6.0.0
루비 2.6.5
구현
그럼 구현해 가겠습니다~
1.Vew 도입
1.1Vew 설치
먼저 Vue 설치합니다.
터미널rails webpacker:install:vue
hello_vue.js' 및 app.vue가 자동으로 생성됩니다.
다음에, 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 %>
<% ↓下記の二行を追記 %>
<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 파일을 읽을 위치 지정
이대로는 디올트이므로, 개별의 새로운 파일로 취급할 수 있도록(듯이) 합니다.
app/views/layouts/html.erb
<%= javascript_pack_tag 'hello_vue' %>
//下記に変更
<%= javascript_pack_tag 'menu_vue' %>
공식적으로는 hello_vue 를 읽어들이도록(듯이) 지정됩니다만, 앞으로 만드는 파일명 menu_vue 로 변경합니다.
새 파일을 'menu_vue'라는 이름으로 만듭니다.
app/javascript/packs/menu_vuevar app = new Vue({
el: '#app',
data: {
message: 'こんにちは Vue!' //←違いがわかりにくにで日本語に変換
}
})
app/views/menus/index.html.erb<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
htps : // 이 m/아키 3/이고 ms/cd1729아 25c9~b83061b9
오류 대응
Webpacker::Manifest::MissingEntryError
이 에러가 나오는 경우 계층이 다른 경우가 많기 때문에, 조심해 새로운 파일을 작성할 필요가 있습니다.
위치는 packs의 부하입니다.
그래도 해결할 수 없다면 yarn이나 webpacker에 문제가있을 수 있습니다.
아래의 기사도 참고해 보세요.
htps : // 이 m / 확실히 rk / ms / 1b5d190c76f5 에 fb7
htps : // 이 m / 나이키 시무라 / ms / 8203f74f8dfd5f6b87 A0
마지막으로
저는 프로그래밍 초학자입니다만, 똑같이 고민하고 있는 분들의 도움이 된다고 생각해, 기사를 투고하고 있습니다.
그럼 또 다음에 만나요~
참고
【공식】
htps : // jp. 아 js. rg/v2/구이데/
Reference
이 문제에 관하여(【Vue.js】메뉴 기능의 구현 Vue.js 도입편 rails6), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/AKI3/items/e87203c590322c908946
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
1.1Vew 설치
먼저 Vue 설치합니다.
터미널
rails webpacker:install:vue
hello_vue.js' 및 app.vue가 자동으로 생성됩니다.다음에,
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 %>
<% ↓下記の二行を追記 %>
<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 파일을 읽을 위치 지정
이대로는 디올트이므로, 개별의 새로운 파일로 취급할 수 있도록(듯이) 합니다.
app/views/layouts/html.erb
<%= javascript_pack_tag 'hello_vue' %>
//下記に変更
<%= javascript_pack_tag 'menu_vue' %>
공식적으로는
hello_vue 를 읽어들이도록(듯이) 지정됩니다만, 앞으로 만드는 파일명 menu_vue 로 변경합니다.새 파일을 'menu_vue'라는 이름으로 만듭니다.
app/javascript/packs/menu_vue
var app = new Vue({
el: '#app',
data: {
message: 'こんにちは Vue!' //←違いがわかりにくにで日本語に変換
}
})
app/views/menus/index.html.erb
<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
htps : // 이 m/아키 3/이고 ms/cd1729아 25c9~b83061b9
오류 대응
Webpacker::Manifest::MissingEntryError
이 에러가 나오는 경우 계층이 다른 경우가 많기 때문에, 조심해 새로운 파일을 작성할 필요가 있습니다.
위치는 packs의 부하입니다.
그래도 해결할 수 없다면 yarn이나 webpacker에 문제가있을 수 있습니다.
아래의 기사도 참고해 보세요.
htps : // 이 m / 확실히 rk / ms / 1b5d190c76f5 에 fb7
htps : // 이 m / 나이키 시무라 / ms / 8203f74f8dfd5f6b87 A0
마지막으로
저는 프로그래밍 초학자입니다만, 똑같이 고민하고 있는 분들의 도움이 된다고 생각해, 기사를 투고하고 있습니다.
그럼 또 다음에 만나요~
참고
【공식】
htps : // jp. 아 js. rg/v2/구이데/
Reference
이 문제에 관하여(【Vue.js】메뉴 기능의 구현 Vue.js 도입편 rails6), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/AKI3/items/e87203c590322c908946
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
【공식】
htps : // jp. 아 js. rg/v2/구이데/
Reference
이 문제에 관하여(【Vue.js】메뉴 기능의 구현 Vue.js 도입편 rails6), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/AKI3/items/e87203c590322c908946텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
