質問編集履歴

2

回答を受けての追記②

2018/04/05 07:51

投稿

kazoogon
kazoogon

スコア281

test CHANGED
File without changes
test CHANGED
@@ -71,3 +71,181 @@
71
71
 
72
72
 
73
73
  ```
74
+
75
+
76
+
77
+ **回答を受けての追加②**
78
+
79
+ main.blade.php
80
+
81
+ ```
82
+
83
+ @extends('layouts.navbar')
84
+
85
+
86
+
87
+ @section('content')
88
+
89
+
90
+
91
+ <div id="app2">
92
+
93
+ <example-component></example-component>
94
+
95
+ </div>
96
+
97
+ <div id="test2">
98
+
99
+ //CDNを使用しVueの練習をしただけのコードなので省略
100
+
101
+ </div>
102
+
103
+
104
+
105
+ <script>
106
+
107
+ //Vueの実装(省略)
108
+
109
+ </script>
110
+
111
+ @endsection
112
+
113
+ ```
114
+
115
+
116
+
117
+
118
+
119
+
120
+
121
+ layouts/navbar.blade.php
122
+
123
+ ```
124
+
125
+ <!DOCTYPE html>
126
+
127
+ <html lang="{{ app()->getLocale() }}">
128
+
129
+ <head>
130
+
131
+ <meta charset="UTF-8">
132
+
133
+ <meta name="viewport"
134
+
135
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
136
+
137
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
138
+
139
+
140
+
141
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
142
+
143
+ <link rel="stylesheet" href="css/app.css">
144
+
145
+
146
+
147
+ <title>Home</title>
148
+
149
+ </head>
150
+
151
+ <body>
152
+
153
+ <div id="app">
154
+
155
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
156
+
157
+ <a href="" class="navbar-brand">KAZU</a>
158
+
159
+ <ul class="navbar-nav">
160
+
161
+ <li class="navbar-item"><router-link to="about_us" class="nav-link">O nas</router-link></li>
162
+
163
+ <li class="navbar-item"><router-link to="blog" class="nav-link">blog</router-link></li>
164
+
165
+ <li class="navbar-item"><router-link to="contact" class="nav-link">contakt</router-link></li>
166
+
167
+ <li class="navbar-item"><router-link to="login" class="nav-link">log in</router-link></li>
168
+
169
+ </ul>
170
+
171
+ </nav>
172
+
173
+ <router-view></router-view>
174
+
175
+ </div>
176
+
177
+
178
+
179
+ @yield('content')
180
+
181
+
182
+
183
+ <!-- Bootstrap用JavaScript -->
184
+
185
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
186
+
187
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
188
+
189
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
190
+
191
+
192
+
193
+ <script src="{{asset('js/app2.js')}}"></script>
194
+
195
+ <script>
196
+
197
+
198
+
199
+ window.onload = function(){
200
+
201
+
202
+
203
+ //テンプレートの設定
204
+
205
+ const about_us = { template: '<div>わたしたち</div>' }
206
+
207
+ const blog = { template: '<div>ブログです</div>' }
208
+
209
+ const contact = { template: '<div>コンタクト!</div>' }
210
+
211
+ const login = { template: '<div>ログイン</div>' }
212
+
213
+
214
+
215
+ //ルートの設定
216
+
217
+ const routes = [
218
+
219
+ { path: '/about_us', component: about_us },
220
+
221
+ { path: '/blog', component: blog },
222
+
223
+ { path: '/contact', component: contact },
224
+
225
+ { path: '/login', component: login }
226
+
227
+ ]
228
+
229
+ const router = new VueRouter({
230
+
231
+ routes // routes: routes の短縮表記
232
+
233
+ })
234
+
235
+ const app = new Vue({
236
+
237
+ router
238
+
239
+ }).$mount('#app')
240
+
241
+
242
+
243
+ }
244
+
245
+ </script>
246
+
247
+ </body>
248
+
249
+ </html>
250
+
251
+ ```

1

回答を受けての追加

2018/04/05 07:51

投稿

kazoogon
kazoogon

スコア281

test CHANGED
File without changes
test CHANGED
@@ -49,3 +49,25 @@
49
49
 
50
50
 
51
51
  よろしくお願いいたします。
52
+
53
+
54
+
55
+
56
+
57
+
58
+
59
+ **回答を受けての追加**
60
+
61
+ (このように ; を追加いたしました、ちなみにCDNを使用すると成功します)
62
+
63
+ ```
64
+
65
+ import Vue from 'vue';
66
+
67
+ import VueRouter from 'vue-router';
68
+
69
+ Vue.use(VueRouter);
70
+
71
+
72
+
73
+ ```