Question

我正在学习vuejs，我没有使用cli进行vuejs安装，我已经下载了vue.js文件并试图学习它。

问题：我能够创建一个组件，但我想将组件存储在外部文件中，如header.vue和footer.vue但不能这样做，我正在使用

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

加载组件，但收到错误，如＆＃34;未捕获的ReferenceError：require未定义＆＃34; 解决该错误我从here下载了require.js文件但仍然无法加载组件文件。

文件夹结构

的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>

Answer 1

单个文件组件（.vue）

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

vuejs中的页眉和页脚组件

1 个答案:

单个文件组件（.vue）