为了提供代码复用性，就把一个div块抽成vue组件，但是换了个html文件就显示组件挂载失败
Failed to mount component: template or render function not defined.
vue文件
<template>
<div class="products">
<div class="image">
<a :href="href" class="link">
<img :src="url">
</a>
</div>
<div class="info">
<a :href="href" class="link">
<font style="color: black;">{{title}}</font><br>
</a>
<font style="color: darkred;">惊喜价：¥{{currentprice}}</font><br>
<font style="color: gray; font-size: calc(14px);">市场价：¥
<font style="text-decoration: line-through;">{{originalprice}}</font>
</font>
</div>
</div>
</template>
<script>
module.exports = {
props: ['href_', 'url_', 'title_', 'currentprice_', 'originalprice_'],
data: function() {
return {
href: this.href_,
url: this.url_,
title: this.title_,
currentprice: this.currentprice_,
originalprice: this.originalprice_
}
}
}
</script>
<style>
.products {
width: 25%;
height: 31.6%;
float: left;
}
.image {
width: 200px;
height: 200px;
position: relative;
left: 11px;
}
.info {
width: 100%;
height: 80px;
position: relative;
top: 1px;
padding-top: 6px;
padding-left: 25px;
}
.link {
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
</style>
能正常运行的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div style="width: 900px; height: 100%; float: left; margin-left: 100px; border: 1px solid gainsboro;">
<div id="products_mod">
<product v-for="item in products"
:href_=item.href
:url_=item.url
:title_=item.title
:currentprice_=item.currentprice
:originalprice_=item.originalprice
></product>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#products_mod",
components: {
'product': httpVueLoader('./components/products.vue')
},
data () {
return {
products: [
{href:"http://baidu.com", url: "./image/bookimage/It'samiracle.jpg", title: "IT's A", currentprice: "66", originalprice: "55"},
{href:"", url: "./image/bookimage/鬼谷子传奇.jpg", title: "鬼谷子传奇(全2册)", currentprice: "69", originalprice: "69"},
{href:"", url: "./image/bookimage/鬼谷子传奇.jpg", title: "鬼谷子传奇(全2册)", currentprice: "69", originalprice: "69"},
{href:"", url: "./image/bookimage/鬼谷子传奇.jpg", title: "鬼谷子传奇(全2册)", currentprice: "69", originalprice: "69"},
{href:"", url: "./image/bookimage/鬼谷子传奇.jpg", title: "鬼谷子传奇(全2册)", currentprice: "69", originalprice: "69"},
]
}
}
});
</script>
</body>
</html>
运行报错的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图书商城</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<link rel="stylesheet" type="text/css" href="../css/homePage.css"/>
</head>
<body>
<!-- 主页面 -->
<div class="main">
<object data="header.html" width=100% height="200px"></object>
<!-- 第四部分(由上而下) -->
<div class="home_four">
<div class="latestProducts">
<div class="latest_title">
<font style="font-size: calc(25px);
color: cadetblue;
position: relative;
left: calc(20px);">最新商品</font>
<font style="font-size: calc(14px);
color: grey;
position: relative;
left: calc(20px);">New Products</font>
<a href="#" class="more">更多商品...</a>
</div>
<div id="products_mod">
<product v-for="item in products"
:href_=item.href
:url_=item.url
:title_=item.title
:currentprice_=item.currentprice
:originalprice_=item.originalprice
></product>
</div>
</div>
</div>
<object data="footer.html" width=100% height="320px"></object>
</div>
<script type="text/javascript">
new Vue({
el: "#products_mod",
components: {
'product': httpVueLoader('./components/products.vue')
},
data () {
return {
products: [
{href:"", url: "./image/bookimage/It'samiracle.jpg", title: "IT's A", currentprice: "66", originalprice: "55"},
{href:"", url: "./image/bookimage/鬼谷子传奇.jpg", title: "鬼谷子传奇(全2册)", currentprice: "69", originalprice: "69"},
{href:"", url: "./image/bookimage/鬼谷子传奇.jpg", title: "鬼谷子传奇(全2册)", currentprice: "69", originalprice: "69"},
{href:"", url: "./image/bookimage/鬼谷子传奇.jpg", title: "鬼谷子传奇(全2册)", currentprice: "69", originalprice: "69"},
{href:"", url: "./image/bookimage/鬼谷子传奇.jpg", title: "鬼谷子传奇(全2册)", currentprice: "69", originalprice: "69"},
]
}
}
});
</script>
</body>
</html>
明明一模一样复制过来的，测试的html文件就没问题，使用的html文件就挂在失败，请网友们帮忙看看，感谢！
