기존 Rails 앱에 Vue.js를 도입했습니다.
Vue.js라는 것이 멋지다.
멋지게 하고 싶었다. 개인 개발 중인 사이트를 멋지게 하고 싶었다. 슛과 하면 퀸이 되어, 버번이 되는 것처럼 하고 싶었다. Vue.js를 도입하기로 결정했다.
그의 동작 원리는 아직 알 수 없지만 학습 비용이 낮고 문서가 충실한 것 같아서 가기로 했다.
webpacker와 yarn 도입
우선 webpacker와 yarn이라는 것이 필요하다.
webpacker는 모듈 번들러라고 하는 녀석으로, 복수의 javascript를 하나로 정리하는 역할을 하고 있다. 뭔가 잘 모르겠다. 다만, 여기에 지금 끼워 버리면 Vue.js를 사용한 멋진 것은 할 수 없다. 후회.
yarn이란 패키지 매니저라고 하는 것 같다. npm의 강화 버전인 것 같다. 라이브러리 추가 및 관리를 용이하게하는 것 같다. 이렇게?
둘 다 이미 내 Rails 앱에 도입되었습니다. Gemfile에는 다음의 설명이 있었다.
gem "webpacker", "~> 4.x"
yarn은 벌써 인스톨 되고 있었다. 버전을 확인하면 문제 없었다.
$ yarn -v
Vue의 초기 파일 만들기
터미널에서 다음 명령을 실행하면 vue에 필요한 파일이 만들어집니다.
$ bundle exec rails webpacker:install:vue
다양하게 만들어졌다.
view 파일에 작성
application.html.erb에 다음의 설명을 추가한다.
view/layouts/application.html.erb <!-- 略 -->
<body>
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
<!-- 略 -->
이 작업을 수행하면 톱 페이지 아래에 "Hello View!"라는 것이 표시됩니다. 표시가 되면 성공이다. 했어.
Vue.js를 들여다 보는 것
javascript_pack_tag를 잡으면app/javascript/packs/hello_vue.js를 읽을 수 있는 것 같다. 이 hello_vue.js는 app/javascript/app.vue를 참조하고 있다.
좀 들여다 보자.
app/javascript/app.vue<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data: function () {
return {
message: "Hello Vue!"
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
CSS 같은 기술이므로 별로 저항이 없어 읽을 수 있다. 아무래도 템플릿 안의 {{ message }} 속에 「Hello Vue!」를 넣고 있는 것 같다. 시험에 문자열을 바꾸어 보니 그렇게 되었다.
이것을 데이터 바인딩이라고 한다. 멋지다.
직접 Vue 파일을 만들자.
언제까지도 헤일로 월드를 하고 있는 것은 되지 않으므로, 더 괴롭혀 가자. 직접 Vue 파일을 만들고 싶습니다. 그 전에 얼마 안되는 hello_vue.js을 읽어 본다. 많은 코멘트가 쓰여져 있을 것이다.
app/javascript/packs/hello_vue.js//いろいろ書かれている
// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
// <div id='hello'>
// {{message}}
// <app></app>
// </div>
//下のコード
조금 번거롭기 때문에 일본어로 번역해 보자.
// 上部のコードはコンパイラなしでVueをつかう場合に用いる。こいつは既存のhtmlテンプレートに
// 対してあんたがVueをいじれないときに使用するものだ。
// そう、これはいつでもシングルコンポーネントのあれだ。
// 既存のhtmlになにかしらのコードをほにゃららしたい場合はしたのコードをコメントアウトしよう。
// そしてhtmlに <%= javascript_pack_tag 'hello_vue' %> を追加。
// あとは以下のdivタグを埋め込んでくれ。
조금 알았다. 그런 이유로, 상부의 코드는 코멘트로 해 버려, 하부의 코멘트가 되어 있는 코드를 코멘트 아웃해 보자.
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello',
data: {
message: "Can you say hello?"
},
components: { App }
})
})
이것이 나올 것이다. 그리고 application.html.erb에 설명을 추가하자.
<body>
<!--略 -->
<div id="hello">
<p>{{ message }}</p>
</div>
<!--略 -->
이렇게 하면 "Hello Vue!"가 "Can you say hello?"가 된다.
어쩐지 알아왔다. 그리고는 파일을 복사해 스스로 Vue 파일을 만들어 버린다. 아까 정도의 app/javascript/packs/hello_vue.js 를 카피해 (코멘트 부분은 필요 없다) 새롭게 app/javascript/packs/custom_vue.js 라고 하는 파일을 만들어 버린다. 일부를 조금 수정한다.
app/javascript/packs/custom_vue.jsimport Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello2',
data: {
message: "聞こえますか？これはvue.jsなのです。htmlの書き込みではありません"
},
components: { App }
})
})
나머지는 application.html.erb의 기술을 일부 변경한다.
<%= javascript_pack_tag 'custom_vue' %> <!-- ←追加-->
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
<!--略 -->
<div id="hello">
<p>{{ message }}</p>
</div>
<!-- 追加↓-->
<div id="hello2">
<p>{{ message }}</p>
</div>
<!-- 略 -->
이렇게 된다.
할 수 있었어! ! ! !
결론
Vue.js는 재미있다. 잘 모르겠지만 즐거워질 것. 보기가 훨씬 바뀌기 때문에 알기 쉽기 때문이다. 앞으로도 개인개발의 진척을 올리면서 막힌 곳을 소개해 나갈 거야.
응원 잘 부탁드립니다!
참고
take off rails 교재
h tps : // f Reeense. 또는 t-l hr thm. 코 m / lp / 타케 - 오 f - ls ls
Reference
이 문제에 관하여(기존 Rails 앱에 Vue.js를 도입했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kyokucho1989/items/5a285256aafe7fee8b5c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
우선 webpacker와 yarn이라는 것이 필요하다.
webpacker는 모듈 번들러라고 하는 녀석으로, 복수의 javascript를 하나로 정리하는 역할을 하고 있다. 뭔가 잘 모르겠다. 다만, 여기에 지금 끼워 버리면 Vue.js를 사용한 멋진 것은 할 수 없다. 후회.
yarn이란 패키지 매니저라고 하는 것 같다. npm의 강화 버전인 것 같다. 라이브러리 추가 및 관리를 용이하게하는 것 같다. 이렇게?
둘 다 이미 내 Rails 앱에 도입되었습니다. Gemfile에는 다음의 설명이 있었다.
gem "webpacker", "~> 4.x"
yarn은 벌써 인스톨 되고 있었다. 버전을 확인하면 문제 없었다.
$ yarn -v
Vue의 초기 파일 만들기
터미널에서 다음 명령을 실행하면 vue에 필요한 파일이 만들어집니다.
$ bundle exec rails webpacker:install:vue
다양하게 만들어졌다.
view 파일에 작성
application.html.erb에 다음의 설명을 추가한다.
view/layouts/application.html.erb <!-- 略 -->
<body>
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
<!-- 略 -->
이 작업을 수행하면 톱 페이지 아래에 "Hello View!"라는 것이 표시됩니다. 표시가 되면 성공이다. 했어.
Vue.js를 들여다 보는 것
javascript_pack_tag를 잡으면app/javascript/packs/hello_vue.js를 읽을 수 있는 것 같다. 이 hello_vue.js는 app/javascript/app.vue를 참조하고 있다.
좀 들여다 보자.
app/javascript/app.vue<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data: function () {
return {
message: "Hello Vue!"
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
CSS 같은 기술이므로 별로 저항이 없어 읽을 수 있다. 아무래도 템플릿 안의 {{ message }} 속에 「Hello Vue!」를 넣고 있는 것 같다. 시험에 문자열을 바꾸어 보니 그렇게 되었다.
이것을 데이터 바인딩이라고 한다. 멋지다.
직접 Vue 파일을 만들자.
언제까지도 헤일로 월드를 하고 있는 것은 되지 않으므로, 더 괴롭혀 가자. 직접 Vue 파일을 만들고 싶습니다. 그 전에 얼마 안되는 hello_vue.js을 읽어 본다. 많은 코멘트가 쓰여져 있을 것이다.
app/javascript/packs/hello_vue.js//いろいろ書かれている
// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
// <div id='hello'>
// {{message}}
// <app></app>
// </div>
//下のコード
조금 번거롭기 때문에 일본어로 번역해 보자.
// 上部のコードはコンパイラなしでVueをつかう場合に用いる。こいつは既存のhtmlテンプレートに
// 対してあんたがVueをいじれないときに使用するものだ。
// そう、これはいつでもシングルコンポーネントのあれだ。
// 既存のhtmlになにかしらのコードをほにゃららしたい場合はしたのコードをコメントアウトしよう。
// そしてhtmlに <%= javascript_pack_tag 'hello_vue' %> を追加。
// あとは以下のdivタグを埋め込んでくれ。
조금 알았다. 그런 이유로, 상부의 코드는 코멘트로 해 버려, 하부의 코멘트가 되어 있는 코드를 코멘트 아웃해 보자.
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello',
data: {
message: "Can you say hello?"
},
components: { App }
})
})
이것이 나올 것이다. 그리고 application.html.erb에 설명을 추가하자.
<body>
<!--略 -->
<div id="hello">
<p>{{ message }}</p>
</div>
<!--略 -->
이렇게 하면 "Hello Vue!"가 "Can you say hello?"가 된다.
어쩐지 알아왔다. 그리고는 파일을 복사해 스스로 Vue 파일을 만들어 버린다. 아까 정도의 app/javascript/packs/hello_vue.js 를 카피해 (코멘트 부분은 필요 없다) 새롭게 app/javascript/packs/custom_vue.js 라고 하는 파일을 만들어 버린다. 일부를 조금 수정한다.
app/javascript/packs/custom_vue.jsimport Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello2',
data: {
message: "聞こえますか？これはvue.jsなのです。htmlの書き込みではありません"
},
components: { App }
})
})
나머지는 application.html.erb의 기술을 일부 변경한다.
<%= javascript_pack_tag 'custom_vue' %> <!-- ←追加-->
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
<!--略 -->
<div id="hello">
<p>{{ message }}</p>
</div>
<!-- 追加↓-->
<div id="hello2">
<p>{{ message }}</p>
</div>
<!-- 略 -->
이렇게 된다.
할 수 있었어! ! ! !
결론
Vue.js는 재미있다. 잘 모르겠지만 즐거워질 것. 보기가 훨씬 바뀌기 때문에 알기 쉽기 때문이다. 앞으로도 개인개발의 진척을 올리면서 막힌 곳을 소개해 나갈 거야.
응원 잘 부탁드립니다!
참고
take off rails 교재
h tps : // f Reeense. 또는 t-l hr thm. 코 m / lp / 타케 - 오 f - ls ls
Reference
이 문제에 관하여(기존 Rails 앱에 Vue.js를 도입했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kyokucho1989/items/5a285256aafe7fee8b5c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ bundle exec rails webpacker:install:vue
application.html.erb에 다음의 설명을 추가한다.view/layouts/application.html.erb
<!-- 略 -->
<body>
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
<!-- 略 -->
이 작업을 수행하면 톱 페이지 아래에 "Hello View!"라는 것이 표시됩니다. 표시가 되면 성공이다. 했어.
Vue.js를 들여다 보는 것
javascript_pack_tag를 잡으면app/javascript/packs/hello_vue.js를 읽을 수 있는 것 같다. 이 hello_vue.js는 app/javascript/app.vue를 참조하고 있다.
좀 들여다 보자.
app/javascript/app.vue<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data: function () {
return {
message: "Hello Vue!"
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
CSS 같은 기술이므로 별로 저항이 없어 읽을 수 있다. 아무래도 템플릿 안의 {{ message }} 속에 「Hello Vue!」를 넣고 있는 것 같다. 시험에 문자열을 바꾸어 보니 그렇게 되었다.
이것을 데이터 바인딩이라고 한다. 멋지다.
직접 Vue 파일을 만들자.
언제까지도 헤일로 월드를 하고 있는 것은 되지 않으므로, 더 괴롭혀 가자. 직접 Vue 파일을 만들고 싶습니다. 그 전에 얼마 안되는 hello_vue.js을 읽어 본다. 많은 코멘트가 쓰여져 있을 것이다.
app/javascript/packs/hello_vue.js//いろいろ書かれている
// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
// <div id='hello'>
// {{message}}
// <app></app>
// </div>
//下のコード
조금 번거롭기 때문에 일본어로 번역해 보자.
// 上部のコードはコンパイラなしでVueをつかう場合に用いる。こいつは既存のhtmlテンプレートに
// 対してあんたがVueをいじれないときに使用するものだ。
// そう、これはいつでもシングルコンポーネントのあれだ。
// 既存のhtmlになにかしらのコードをほにゃららしたい場合はしたのコードをコメントアウトしよう。
// そしてhtmlに <%= javascript_pack_tag 'hello_vue' %> を追加。
// あとは以下のdivタグを埋め込んでくれ。
조금 알았다. 그런 이유로, 상부의 코드는 코멘트로 해 버려, 하부의 코멘트가 되어 있는 코드를 코멘트 아웃해 보자.
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello',
data: {
message: "Can you say hello?"
},
components: { App }
})
})
이것이 나올 것이다. 그리고 application.html.erb에 설명을 추가하자.
<body>
<!--略 -->
<div id="hello">
<p>{{ message }}</p>
</div>
<!--略 -->
이렇게 하면 "Hello Vue!"가 "Can you say hello?"가 된다.
어쩐지 알아왔다. 그리고는 파일을 복사해 스스로 Vue 파일을 만들어 버린다. 아까 정도의 app/javascript/packs/hello_vue.js 를 카피해 (코멘트 부분은 필요 없다) 새롭게 app/javascript/packs/custom_vue.js 라고 하는 파일을 만들어 버린다. 일부를 조금 수정한다.
app/javascript/packs/custom_vue.jsimport Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello2',
data: {
message: "聞こえますか？これはvue.jsなのです。htmlの書き込みではありません"
},
components: { App }
})
})
나머지는 application.html.erb의 기술을 일부 변경한다.
<%= javascript_pack_tag 'custom_vue' %> <!-- ←追加-->
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
<!--略 -->
<div id="hello">
<p>{{ message }}</p>
</div>
<!-- 追加↓-->
<div id="hello2">
<p>{{ message }}</p>
</div>
<!-- 略 -->
이렇게 된다.
할 수 있었어! ! ! !
결론
Vue.js는 재미있다. 잘 모르겠지만 즐거워질 것. 보기가 훨씬 바뀌기 때문에 알기 쉽기 때문이다. 앞으로도 개인개발의 진척을 올리면서 막힌 곳을 소개해 나갈 거야.
응원 잘 부탁드립니다!
참고
take off rails 교재
h tps : // f Reeense. 또는 t-l hr thm. 코 m / lp / 타케 - 오 f - ls ls
Reference
이 문제에 관하여(기존 Rails 앱에 Vue.js를 도입했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kyokucho1989/items/5a285256aafe7fee8b5c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<template>
<div id="app">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data: function () {
return {
message: "Hello Vue!"
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
언제까지도 헤일로 월드를 하고 있는 것은 되지 않으므로, 더 괴롭혀 가자. 직접 Vue 파일을 만들고 싶습니다. 그 전에 얼마 안되는
hello_vue.js을 읽어 본다. 많은 코멘트가 쓰여져 있을 것이다.app/javascript/packs/hello_vue.js
//いろいろ書かれている
// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
// <div id='hello'>
// {{message}}
// <app></app>
// </div>
//下のコード
조금 번거롭기 때문에 일본어로 번역해 보자.
// 上部のコードはコンパイラなしでVueをつかう場合に用いる。こいつは既存のhtmlテンプレートに
// 対してあんたがVueをいじれないときに使用するものだ。
// そう、これはいつでもシングルコンポーネントのあれだ。
// 既存のhtmlになにかしらのコードをほにゃららしたい場合はしたのコードをコメントアウトしよう。
// そしてhtmlに <%= javascript_pack_tag 'hello_vue' %> を追加。
// あとは以下のdivタグを埋め込んでくれ。
조금 알았다. 그런 이유로, 상부의 코드는 코멘트로 해 버려, 하부의 코멘트가 되어 있는 코드를 코멘트 아웃해 보자.
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello',
data: {
message: "Can you say hello?"
},
components: { App }
})
})
이것이 나올 것이다. 그리고 application.html.erb에 설명을 추가하자.
<body>
<!--略 -->
<div id="hello">
<p>{{ message }}</p>
</div>
<!--略 -->
이렇게 하면 "Hello Vue!"가 "Can you say hello?"가 된다.
어쩐지 알아왔다. 그리고는 파일을 복사해 스스로 Vue 파일을 만들어 버린다. 아까 정도의
app/javascript/packs/hello_vue.js 를 카피해 (코멘트 부분은 필요 없다) 새롭게 app/javascript/packs/custom_vue.js 라고 하는 파일을 만들어 버린다. 일부를 조금 수정한다.app/javascript/packs/custom_vue.js
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello2',
data: {
message: "聞こえますか？これはvue.jsなのです。htmlの書き込みではありません"
},
components: { App }
})
})
나머지는
application.html.erb의 기술을 일부 변경한다.<%= javascript_pack_tag 'custom_vue' %> <!-- ←追加-->
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
<!--略 -->
<div id="hello">
<p>{{ message }}</p>
</div>
<!-- 追加↓-->
<div id="hello2">
<p>{{ message }}</p>
</div>
<!-- 略 -->
이렇게 된다.
할 수 있었어! ! ! !
결론
Vue.js는 재미있다. 잘 모르겠지만 즐거워질 것. 보기가 훨씬 바뀌기 때문에 알기 쉽기 때문이다. 앞으로도 개인개발의 진척을 올리면서 막힌 곳을 소개해 나갈 거야.
응원 잘 부탁드립니다!
참고
take off rails 교재
h tps : // f Reeense. 또는 t-l hr thm. 코 m / lp / 타케 - 오 f - ls ls
Reference
이 문제에 관하여(기존 Rails 앱에 Vue.js를 도입했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kyokucho1989/items/5a285256aafe7fee8b5c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(기존 Rails 앱에 Vue.js를 도입했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kyokucho1989/items/5a285256aafe7fee8b5c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
