質問編集履歴
1
発生している問題として、Vue.js devtoolsに関する記述を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
### 前提
|
|
2
2
|
`rails webpacker:install`
|
|
3
3
|
`rails webpacker:install:vue`
|
|
4
|
-
上記のコマンドを実行し、RailsアプリケーションにVue.jsをインストールしたのですが、デフォルトで用意されている'Hello Vue!'
|
|
4
|
+
上記のコマンドを実行し、RailsアプリケーションにVue.jsをインストールしたのですが、デフォルトで用意されている'Hello Vue!'が表示されず困っています。よろしければお力添えをお願いいたします🙏
|
|
5
5
|
|
|
6
6
|
### 実現したいこと
|
|
7
7
|
`localhost:3000/home`にアクセスした際に`'Hello Vue!'`が表示されるようにしたいです。
|
|
8
8
|
|
|
9
9
|
### 発生している問題・エラーメッセージ
|
|
10
|
-
|
|
10
|
+
Vue.js devtoolsでは`Vue.js not detected`と表示される。
|
|
11
|
+
|
|
12
|
+
chromeのコンソール
|
|
11
|
-
``` console
|
|
13
|
+
``` console
|
|
12
14
|
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
|
|
13
15
|
at HTMLDocument.<anonymous> (hello_vue.js:12:1)
|
|
14
16
|
```
|
|
@@ -80,7 +82,60 @@
|
|
|
80
82
|
console.log(app)
|
|
81
83
|
})
|
|
82
84
|
|
|
85
|
+
|
|
86
|
+
// The above code uses Vue without the compiler, which means you cannot
|
|
87
|
+
// use Vue to target elements in your existing html templates. You would
|
|
88
|
+
// need to always use single file components.
|
|
89
|
+
// To be able to target elements in your existing html/erb templates,
|
|
90
|
+
// comment out the above code and uncomment the below
|
|
91
|
+
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
|
|
92
|
+
// Then add this markup to your html template:
|
|
83
|
-
|
|
93
|
+
//
|
|
94
|
+
// <div id='hello'>
|
|
95
|
+
// {{message}}
|
|
96
|
+
// <app></app>
|
|
97
|
+
// </div>
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
// import Vue from 'vue/dist/vue.esm'
|
|
101
|
+
// import App from '../app.vue'
|
|
102
|
+
//
|
|
103
|
+
// document.addEventListener('DOMContentLoaded', () => {
|
|
104
|
+
// const app = new Vue({
|
|
105
|
+
// el: '#hello',
|
|
106
|
+
// data: {
|
|
107
|
+
// message: "Can you say hello?"
|
|
108
|
+
// },
|
|
109
|
+
// components: { App }
|
|
110
|
+
// })
|
|
111
|
+
// })
|
|
112
|
+
//
|
|
113
|
+
//
|
|
114
|
+
//
|
|
115
|
+
// If the project is using turbolinks, install 'vue-turbolinks':
|
|
116
|
+
//
|
|
117
|
+
// yarn add vue-turbolinks
|
|
118
|
+
//
|
|
119
|
+
// Then uncomment the code block below:
|
|
120
|
+
//
|
|
121
|
+
// import TurbolinksAdapter from 'vue-turbolinks'
|
|
122
|
+
// import Vue from 'vue/dist/vue.esm'
|
|
123
|
+
// import App from '../app.vue'
|
|
124
|
+
//
|
|
125
|
+
// Vue.use(TurbolinksAdapter)
|
|
126
|
+
//
|
|
127
|
+
// document.addEventListener('turbolinks:load', () => {
|
|
128
|
+
// const app = new Vue({
|
|
129
|
+
// el: '#hello',
|
|
130
|
+
// data: () => {
|
|
131
|
+
// return {
|
|
132
|
+
// message: "Can you say hello?"
|
|
133
|
+
// }
|
|
134
|
+
// },
|
|
135
|
+
// components: { App }
|
|
136
|
+
// })
|
|
137
|
+
// })
|
|
138
|
+
|
|
84
139
|
```
|
|
85
140
|
|
|
86
141
|
### 試したこと
|