[問題] 新手剛碰Vue 頁面無法顯示component

[Louisay11 (水怪)]

想請問各位高手們

小的剛摸索Vue.js
剛建立好的Component要如何順利顯示在網頁上呢？

我使用了webpack建立了專案

剛開始localhost開啟網頁還有Hello Vue

之後新增了component test.vue
開啟localhost一直是空白頁
新增的component一直無法顯示

即使我把test.vue刪除
讓檔案跟原本剛建立時一樣
連Hello Vue都無法再顯示了

但localhost又可以顯示index.html的內容

我google了半天，發現大家都可以順利顯示Component
也參考了相關路由設定
還是無法顯示我的Component！！

求解～

感謝大家


--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 27.246.195.108 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1561748235.A.1D7.html
推 VdustR: 要不要從 vue cli 3 開始試試？
推 luckynu: 應該有不能顯示時的錯誤文字，是否可以貼出來看看
→ luckynu: 我覺得是port沒打，index.html可以顯示，我覺得是有安裝p
→ luckynu: hp的套件，但是vue應該是用node.js中運行的
→ luckynu: test.vue無法顯示，可能是程式碼的問題，需要貼出程式碼
→ luckynu: 來才能幫忙看
→ luckynu: 水晶球debug的功力不足
推 shter: 你有用 Vue-router 的話注意一下 hash 內容是否完全吻合
抱歉,我補上實作的範例
欲顯示的component是test.vue
<template>
  <div class="show">{{msg}}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello!"
    };
  }
};
</script>
(style省略）

index.js修改如下
import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
import test from "@/components/test";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld
    },
    {
      path: "/test",
      name: "/test",
      component: test
    }
  ]
});

main.js 沒有動到
import Vue from "vue";
import App from "./App";
import router from "./router";
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

App.vue也沒有動到
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
import footer from "./components/footer.vue";
export default {
  name: "App"
};
</script>

再按照網路上的簡單範例重新建立新的專案，
還是無法順利看到Component放在網頁上><
※ 編輯: Louisay11 (150.117.253.10 臺灣), 06/29/2019 14:34:55
→ at5lp6andy: 開網頁的時候網址是localhost:8080/#/test嗎
→ Louisay11: 是的，就是這串，但完全空白頁面，怎麼會這樣QQ
→ at5lp6andy: 看一下F12的console有沒有錯誤訊息，有的話貼上來，
→ at5lp6andy: 這樣比較好判斷
→ Nonsense8: devtool貼上來吧，還有routes的name怎麼會是/test
→ Nonsense8: 還有剛摸vue.js最好別從vue-cli上手...這樣會讓你”誤
→ Nonsense8: 會”很多東西
推 shter: 你在 routes 加一個 {path: '*', component:HelloWorld}
→ shter: 再打開看看是不是跑到 HelloWorld 就知道是否路由匹配錯誤
推 shter: 另外你可以在 new Vue({ 前加 window.test1 = new Vue({
→ shter: 這樣到瀏覽器可以 console 內方便 debug
→ shter: window.test1.$route 可以看到它運行的 path 資訊
→ Louisay11: 好的，感謝大家