vue.js - 全局注册单文件组件

Question

我在这里开门见山，我正在使用 VUEJS 创建注册表单。但是，当我尝试在全局范围内注册该组件时，它给了我错误。 请多多包涵，我还是 vuejs 的新手。

当我检查控制台时，它给我这个错误:

n is not a function

在此先感谢您的帮助。

这是我的代码:

index.php 文件

<section id="app" class="homepage">
   <div class="content">
    <?php
        $this->load->view($content);
    ?>
   </div>
</section>

<script src="<?php echo base_url(); ?>/js/vue.min.js" ></script>
<script src="<?php echo base_url(); ?>/js/vue-resource.min.js" ></script>
<script src="<?php echo base_url(); ?>/js/app.js" ></script>

app.js 文件

Vue.component("tour-form", './components/tourForm.vue');

const app =  new Vue({
    el:'#app',
    data(){
        return{
        }
    }
});

tour_form.php 文件

<tour-form></tour-form>

Answer 1

Vue.component() 将组件选项(对象 {})作为其第二个参数

但是您将 vue 组件的路径作为字符串传递。

由于您使用的是 .vue 文件，您可能会使用 vue-loader 来解析这些文件。

vue-loader 将组件转换为普通的 javascript 模块。

因此导入组件并将其作为第二个参数传递

import TourForm from './components/tourForm.vue'

Vue.component("tour-form", TourForm);

const app =  new Vue({
    el:'#app',
    data(){
        return{
        }
    }
});