gpt4 book ai didi

vue.js - Vue.js 中的页眉和页脚组件

转载 作者:搜寻专家 更新时间:2023-10-30 22:30:15 25 4
gpt4 key购买 nike

我正在学习 Vue.js,我没有使用 cli 安装 Vue.js,我只是下载了 Vue.js 文件并尝试学习它。

我的问题是将 header.vue 和 footer.vue 等组件外部化并将它们添加到主组件。

我使用 Vue.component('MyHeader', require('./components/Header.vue')); 来加载组件,但我收到了类似 "Uncaught ReferenceError:要求未定义”

为了解决这个错误,我从 here 下载了 require.js 文件但我仍然无法加载组件文件。

文件夹结构

enter image description here

index.html

<!DOCTYPE html>
<html>
<head>
<title>this is example of header and footer</title>
</head>
<body>

<div id='root'>
<testcomponent></testcomponent>
<MyHeader></MyHeader>
<div>I am Content</div>
<MyFooter></MyFooter>
</div>


<!-- we need this two files for vue js -->
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="require.js"></script>
<!-- End of we need this two files for vue js -->
<script type="text/javascript" src="indexController.js"></script>
</body>
</html>

indexController.js

//rout file for vue js

Vue.component("testcomponent",{
template:'<p>I am Test Component</p>'
});

Vue.component('MyHeader', require('./components/Header.vue'));
Vue.component('MyFooter', require('./components/Footer.vue'));

//import MyHeader from './components/Header.vue'
//import MyFooter from './components/Footer.vue'

var app = new Vue({
el: "#root",
components: {
MyHeader,
MyFooter
},
data: {

},
methods:{

}

});

Header.vue

<template>
<h1>I am Header</h1>
</template>

Footer.vue

<template>
<h1>I am Footer</h1>
</template>

最佳答案

单文件组件(.vue)

您需要vue-loader 将.vue 文件转换为普通的js 格式。如果您将阅读 https://v2.vuejs.org/v2/guide/single-file-components.html 处的文档,您基本上需要使用 webpack 或 browserify 才能使用 .vue 文件扩展名。

关于vue.js - Vue.js 中的页眉和页脚组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48946164/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com