作者Louisay11 (水怪)
看板Ajax
标题[问题] Vue页面无法显示Component
时间Sat Jun 29 03:55:13 2019
想请问各位高手们
前端新手刚摸索Vue.js
刚建立好的Component要如何顺利显示在网页上呢？
使用了webpack建立了专案
刚开始localhost开启网页还有Hello Vue
之後新增了component test.vue
开启localhost一直是空白页
新增的component一直无法显示
即使我把test.vue删除
让档案跟原本刚建立时一样
连Hello Vue都无法再显示了
但localhost又可以显示index.html的内容
我google了半天，发现大家都可以顺利显示Component
也参考了相关路由设定
还是无法显示我的Component
求解
感谢大家
-----
Sent from JPTT on my Asus ASUS_Z01RD.
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 27.246.195.108 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1561751715.A.07B.html
1F：→ brianwu1201: 问问题不贴个 codepen或code 的内容，是要大家通灵 06/29 12:44
→ brianwu1201: 吗 XD
抱歉,我补上范例
下面是欲放上的component test.vue
<template>
<div class="show">{{msg}}</div>
</template>
<script>
export default {
data() {
return {
msg: "Hello!"
};
}
};
</script>
(省略css）
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/>"
});
是按照网路上的范例 以vue cli建立的
但还是无法显示自己新建的Component><
谢谢
06/29 12:44
※ 编辑: Louisay11 (150.117.253.10 台湾), 06/29/2019 14:38:57
2F：→ Rinorune: 那app.js呢 或是设个publicPath 06/29 15:50
3F：→ pkro12345: 你的test.vue没有name 07/01 13:02