質問するログイン新規登録

質問編集履歴

2

Navbarのソース他を追記しました

2020/11/10 08:29

投稿

Tikka123456
Tikka123456

スコア34

title CHANGED
File without changes
body CHANGED
@@ -93,6 +93,8 @@
93
93
  ```
94
94
 
95
95
  **追記**
96
+
97
+ 参考にしているサイトhttps://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project/
96
98
  ```ここに言語を入力
97
99
  .js
98
100
  ├──commponent
@@ -105,4 +107,64 @@
105
107
  ├──app.js
106
108
  ├──App.vue
107
109
  └──router.js
108
- ```
110
+ ```
111
+ Navbar.vue
112
+ ```ここに言語を入力
113
+ <template>
114
+ <nav class="nav grey lighten-4 py-4">
115
+ <RouterLink class="navbar-brand" to="/">
116
+ タイトル
117
+ </RouterLink>
118
+
119
+ <ul class="navbar-nav ml-auto">
120
+ <div class="navbar-menu">
121
+ <li class="navbar-item">
122
+ <button type="button" class="btn btn-secondary btn-rounded">
123
+ <i class="icon ion-md-add"></i>
124
+ Submit a photo
125
+ </button>
126
+
127
+ </li>
128
+
129
+ <span class="navbar-item">
130
+ username
131
+   </span>
132
+   <div class="navbar-item">
133
+    <RouterLink class="button button--link" to="/login">
134
+ Login / Register
135
+ </RouterLink>
136
+   </div>
137
+   
138
+ </div>
139
+ </ul>
140
+
141
+
142
+
143
+ </nav>
144
+
145
+ </template>
146
+
147
+ ```
148
+ Footer.vue
149
+ ```ここに言語を入力
150
+ <template>
151
+ <footer class="page-footer font-small unique-color-dark pt-4">
152
+ <RouterLink class="button button--link" to="/login">
153
+ Login / Register
154
+ </RouterLink>
155
+ </footer>
156
+ </template>
157
+
158
+ ```
159
+ PhotoList.vue ここだけ表示されている
160
+ ```ここに言語を入力
161
+ <template>
162
+ <h1>Photo List</h1>
163
+ </template>
164
+
165
+
166
+ <script>
167
+ </script>
168
+ ```
169
+ 現在表示されている画面
170
+ ![イメージ説明](7a8e2d2ac3a7424b26bc4e9f7ae50df5.png)

1

フォルダ構成を追記しました。

2020/11/10 08:29

投稿

Tikka123456
Tikka123456

スコア34

title CHANGED
File without changes
body CHANGED
@@ -90,4 +90,19 @@
90
90
  })
91
91
 
92
92
  export default router
93
+ ```
94
+
95
+ **追記**
96
+ ```ここに言語を入力
97
+ .js
98
+ ├──commponent
99
+ │ ├──pages
100
+ │ │ ├──Login.vue
101
+ │ │ └──PhotoList.vue
102
+ │ ├──Navbar.vue
103
+ │ └──Footer.vue
104
+
105
+ ├──app.js
106
+ ├──App.vue
107
+ └──router.js
93
108
  ```