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

回答編集履歴

2

説明追加

2018/06/20 00:30

投稿

euledge
euledge

スコア2404

answer CHANGED
@@ -14,7 +14,7 @@
14
14
  ### 開発時の階層例
15
15
 
16
16
  ``` text
17
- ---- jsp
17
+ ---- jsp (ここのフォルダの名前は適当です自分の環境に読み替えてください)
18
18
  | +-- home
19
19
  | | +- index.jsp
20
20
  | | +- home.jsp

1

誤字の修正

2018/06/20 00:30

投稿

euledge
euledge

スコア2404

answer CHANGED
@@ -35,7 +35,7 @@
35
35
  | | +- index
36
36
  | | +- new
37
37
  | | +- confirm
38
- | +-- components (胸痛で使えるVueComponents)
38
+ | +-- components (共通で使えるVueComponents)
39
39
  |
40
40
  +-- dist(コンパイル後のvue置き場)
41
41
  +-- home
@@ -59,7 +59,7 @@
59
59
  <!-- home/index -->
60
60
  <div id="app"></div>
61
61
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
62
- <!-- home/indexに使用するvueのエントリポイント -->
62
+ <!-- home/indexに使用するvueのエントリポイント ページ毎に異なる app.jsを読む-->
63
63
  <script src="dist/home/index/app.js"></script>
64
64
  </body>
65
65
  ```
@@ -67,11 +67,11 @@
67
67
  各ページに用意するapp.jsは以下のようなものですね。
68
68
  この中で各ページのレンダリングに使う.vueを読み込んであげればよいです。
69
69
  ``` js
70
+ import Vue from "vue";
70
- import page './page.vue'
71
+ import Page from "./page";
72
+
71
73
  var app = new Vue({
72
74
  el: '#app',
73
- data: {
75
+ components: { Page}
74
- message: 'Hello Vue!'
75
- }
76
- })
76
+ });
77
77
  ```