teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問vue.jsでのnavbarにおけるハンバーガーメニューの動作について

編集履歴

質問編集履歴

4

誤字

2021/06/05 10:03

投稿

shun7486-eng
shun7486-eng

スコア2

test CHANGED
File without changes
test CHANGED
@@ -112,7 +112,7 @@
112
112
 
113
113
  [src/router/index.jsのコード]
114
114
 
115
- mport Vue from 'vue'
115
+ import Vue from 'vue'
116
116
 
117
117
  import BootstrapVue from 'bootstrap-vue' // added
118
118
 

3

書式改善

2021/06/05 10:03

投稿

shun7486-eng
shun7486-eng

スコア2

test CHANGED
File without changes
test CHANGED
@@ -10,18 +10,6 @@
10
10
 
11
11
  <追記>
12
12
 
13
- index.jsのコード
14
-
15
- ![index.jsのコード](2508cbbba8b2315fe632333a637fc935.png)
16
-
17
- App.vueのコード
18
-
19
- ![App.vue](0a4b76753516806629c91a33ec64eb0b.png)
20
-
21
- main.jsのコード
22
-
23
- ![main.js](199c81d6ec42caecc506013c07248fdb.png)
24
-
25
13
  Package.jsonのコード
26
14
 
27
15
  bootstrapのバージョンが間違っていました。申し訳ございません。
@@ -56,6 +44,8 @@
56
44
 
57
45
  ### 該当のソースコード
58
46
 
47
+ [src/components/myheader.vueのコード]
48
+
59
49
  <template>
60
50
 
61
51
  <div>
@@ -116,6 +106,182 @@
116
106
 
117
107
  ソースコード
118
108
 
109
+ ※追記コード
110
+
111
+
112
+
113
+ [src/router/index.jsのコード]
114
+
115
+ mport Vue from 'vue'
116
+
117
+ import BootstrapVue from 'bootstrap-vue' // added
118
+
119
+ import 'bootstrap/dist/css/bootstrap.css' // added
120
+
121
+ import 'bootstrap-vue/dist/bootstrap-vue.css' // added
122
+
123
+ import Router from 'vue-router'
124
+
125
+ import HelloWorld from '@/components/HelloWorld'
126
+
127
+ import About from '@/components/About'
128
+
129
+ import Languages from '@/components/Languages'
130
+
131
+ import Portfolio from '@/components/Portfolio'
132
+
133
+
134
+
135
+ Vue.use(Router)
136
+
137
+ Vue.use(BootstrapVue) // added
138
+
139
+
140
+
141
+ export default new Router({
142
+
143
+ routes: [
144
+
145
+ {
146
+
147
+ path: '/',
148
+
149
+ name: 'HelloWorld',
150
+
151
+ component: HelloWorld
152
+
153
+ },
154
+
155
+ {
156
+
157
+ path: '/About',
158
+
159
+ name: 'About',
160
+
161
+ component: About
162
+
163
+ },
164
+
165
+ {
166
+
167
+ path: '/Languages',
168
+
169
+ name: 'Languages',
170
+
171
+ component: Languages
172
+
173
+ },
174
+
175
+ {
176
+
177
+ path: '/Portfolio',
178
+
179
+ name: 'Portfolio',
180
+
181
+ component: Portfolio
182
+
183
+ }
184
+
185
+ ]
186
+
187
+ })
188
+
189
+
190
+
191
+ [src/App.vueのコード]
192
+
193
+ <template>
194
+
195
+ <div id="app">
196
+
197
+ <myheader></myheader>
198
+
199
+ <router-view/>
200
+
201
+ <button class="btn btn-primary">test</button>
202
+
203
+ </div>
204
+
205
+ </template>
206
+
207
+
208
+
209
+ <script>
210
+
211
+ import myheader from './components/myheader'
212
+
213
+
214
+
215
+ export default {
216
+
217
+ name: 'App',
218
+
219
+ components: {
220
+
221
+ myheader
222
+
223
+ }
224
+
225
+ }
226
+
227
+ </script>
228
+
229
+
230
+
231
+ <style>
232
+
233
+ #app {
234
+
235
+ font-family: 'Avenir', Helvetica, Arial, sans-serif;
236
+
237
+ -webkit-font-smoothing: antialiased;
238
+
239
+ -moz-osx-font-smoothing: grayscale;
240
+
241
+ text-align: center;
242
+
243
+ color: #2c3e50;
244
+
245
+ margin-top: 60px;
246
+
247
+ }
248
+
249
+ </style>
250
+
251
+
252
+
253
+ [src/main.jsのコード]
254
+
255
+ // The Vue build version to load with the `import` command
256
+
257
+ // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
258
+
259
+ import Vue from 'vue'
260
+
261
+ import App from './App'
262
+
263
+ import router from './router'
264
+
265
+
266
+
267
+ Vue.config.productionTip = false
268
+
269
+
270
+
271
+ /* eslint-disable no-new */
272
+
273
+ new Vue({
274
+
275
+ el: '#app',
276
+
277
+ router,
278
+
279
+ components: { App },
280
+
281
+ template: '<App/>'
282
+
283
+ })
284
+
119
285
  ```
120
286
 
121
287
 

2

一部誤字修正

2021/06/05 10:01

投稿

shun7486-eng
shun7486-eng

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,3 @@
1
- ##![イメージ説明](a81576ca68e4e0ee45e0ccdce993854e.png)現したいこと
2
-
3
-
4
-
5
1
  プログラミング初心者です。
6
2
 
7
3
  vue.jsでbootstrap4を用いてnavbarを実装しました。

1

変更点 コードの追加　エラーメッセージの追記　試したことの追記

2021/06/05 09:36

投稿

shun7486-eng
shun7486-eng

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ### 前提・実現したいこと
1
+ ##![イメージ説明](a81576ca68e4e0ee45e0ccdce993854e.png)現したいこと
2
2
 
3
3
 
4
4
 
@@ -12,11 +12,43 @@
12
12
 
13
13
 
14
14
 
15
+ <追記>
16
+
17
+ index.jsのコード
18
+
19
+ ![index.jsのコード](2508cbbba8b2315fe632333a637fc935.png)
20
+
21
+ App.vueのコード
22
+
23
+ ![App.vue](0a4b76753516806629c91a33ec64eb0b.png)
24
+
25
+ main.jsのコード
26
+
27
+ ![main.js](199c81d6ec42caecc506013c07248fdb.png)
28
+
29
+ Package.jsonのコード
30
+
31
+ bootstrapのバージョンが間違っていました。申し訳ございません。
32
+
33
+ ![Package.json](b0546990919dd5d6c2da5050d1ee971e.png)
34
+
15
35
 
16
36
 
17
37
  ### 発生している問題・エラーメッセージ
18
38
 
39
+ <追記>
19
40
 
41
+ 開発者ツールについては存じておりましたが、コンソールでエラーを確認することができるのは知りませんでした、、。
42
+
43
+ 確認したところエラー表記がありましたので、そのままコピペして載せます。
44
+
45
+
46
+
47
+ Unchecked runtime.lastError: The message port closed before a response was received.　http://localhost:8080/#/
48
+
49
+
50
+
51
+ 以上のメッセージが出てました。
20
52
 
21
53
  ```
22
54
 
@@ -98,9 +130,13 @@
98
130
 
99
131
  ここに問題に対して試したことを記載してください。
100
132
 
133
+ <追記>
101
134
 
135
+ こちらのページを参考にプロジェクトを作成いたしました。
102
136
 
137
+ 進捗としてはこのページの作業を全て終え、ハンバーガーメニューのみを自分で実装しはじめたところです。
103
138
 
139
+ https://qiita.com/masa08/items/3474d97a1283dfc275c9
104
140
 
105
141
 
106
142