作者Louisay11 (水怪)
看板Web_Design
标题[问题] 新手刚碰Vue 页面无法显示component
时间Sat Jun 29 02:57:13 2019
想请问各位高手们
小的刚摸索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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1561748235.A.1D7.html
1F：推 VdustR: 要不要从 vue cli 3 开始试试？ 06/29 04:10
2F：推 luckynu: 应该有不能显示时的错误文字，是否可以贴出来看看 06/29 07:40
3F：→ luckynu: 我觉得是port没打，index.html可以显示，我觉得是有安装p 06/29 07:43
4F：→ luckynu: hp的套件，但是vue应该是用node.js中运行的 06/29 07:43
5F：→ luckynu: test.vue无法显示，可能是程式码的问题，需要贴出程式码 06/29 07:45
6F：→ luckynu: 来才能帮忙看 06/29 07:45
7F：→ luckynu: 水晶球debug的功力不足 06/29 07:46
8F：推 shter: 你有用 Vue-router 的话注意一下 hash 内容是否完全吻合 06/29 10:32
抱歉,我补上实作的范例
欲显示的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
9F：→ at5lp6andy: 开网页的时候网址是localhost:8080/#/test吗 06/29 17:19
10F：→ Louisay11: 是的，就是这串，但完全空白页面，怎麽会这样QQ 06/29 18:21
11F：→ at5lp6andy: 看一下F12的console有没有错误讯息，有的话贴上来， 06/29 18:35
12F：→ at5lp6andy: 这样比较好判断 06/29 18:35
13F：→ Nonsense8: devtool贴上来吧，还有routes的name怎麽会是/test 06/29 19:29
14F：→ Nonsense8: 还有刚摸vue.js最好别从vue-cli上手...这样会让你”误 06/29 19:38
15F：→ Nonsense8: 会”很多东西 06/29 19:38
16F：推 shter: 你在 routes 加一个 {path: '*', component:HelloWorld} 06/29 20:00
17F：→ shter: 再打开看看是不是跑到 HelloWorld 就知道是否路由匹配错误 06/29 20:00
18F：推 shter: 另外你可以在 new Vue({ 前加 window.test1 = new Vue({ 06/29 20:04
19F：→ shter: 这样到浏览器可以 console 内方便 debug 06/29 20:04
20F：→ shter: window.test1.$route 可以看到它运行的 path 资讯 06/29 20:05
21F：→ Louisay11: 好的，感谢大家 06/30 00:07