极客观点
项目管理
HarmonyOS
我正在学习 Vue.js，我没有使用 cli 安装 Vue.js，我只是下载了 Vue.js 文件并尝试学习它。
我的问题是将 header.vue 和 footer.vue 等组件外部化并将它们添加到主组件中。
我使用 Vue.component('MyHeader', require('./components/Header.vue')); 加载组件，但我收到了类似 "Uncaught ReferenceError: require is not defined" 的错误。
为了解决这个错误，我从 这里 下载了 require.js 文件，但我仍然无法加载组件文件。
文件夹结构
索引.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:{
}
});
头文件.vue
<template>
<h1>I am Header</h1>
</template>
页脚.vue
<template>
<h1>I am Footer</h1>
</template>
原文由 Juned Ansari 发布，翻译遵循 CC BY-SA 4.0 许可协议
单个文件组件 (.vue)
您需要 vue-loader 将 .vue 文件转换为普通的 js 格式。如果您将阅读 https://v2.vuejs.org/v2/guide/single-file-components.html 上的文档，则基本上需要使用 webpack 或 browserify 来使用 .vue 文件扩展名。