[問題] 新手剛碰Vue 頁面無法顯示component
想請問各位高手們
小的剛摸索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
推
06/29 04:10,
5年前
, 1F
06/29 04:10, 1F
推
06/29 07:40,
5年前
, 2F
06/29 07:40, 2F
→
06/29 07:43,
5年前
, 3F
06/29 07:43, 3F
→
06/29 07:43,
5年前
, 4F
06/29 07:43, 4F
→
06/29 07:45,
5年前
, 5F
06/29 07:45, 5F
→
06/29 07:45,
5年前
, 6F
06/29 07:45, 6F
→
06/29 07:46,
5年前
, 7F
06/29 07:46, 7F
推
06/29 10:32,
5年前
, 8F
06/29 10:32, 8F
抱歉,我補上實作的範例
欲顯示的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
→
06/29 17:19,
5年前
, 9F
06/29 17:19, 9F
→
06/29 18:21,
5年前
, 10F
06/29 18:21, 10F
→
06/29 18:35,
5年前
, 11F
06/29 18:35, 11F
→
06/29 18:35,
5年前
, 12F
06/29 18:35, 12F
→
06/29 19:29,
5年前
, 13F
06/29 19:29, 13F
→
06/29 19:38,
5年前
, 14F
06/29 19:38, 14F
→
06/29 19:38,
5年前
, 15F
06/29 19:38, 15F
推
06/29 20:00,
5年前
, 16F
06/29 20:00, 16F
→
06/29 20:00,
5年前
, 17F
06/29 20:00, 17F
推
06/29 20:04,
5年前
, 18F
06/29 20:04, 18F
→
06/29 20:04,
5年前
, 19F
06/29 20:04, 19F
→
06/29 20:05,
5年前
, 20F
06/29 20:05, 20F
→
06/30 00:07,
5年前
, 21F
06/30 00:07, 21F
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
