Vue.js Vue组件未加载

我得到了这个有问题的代码库，其中Vue组件没有加载

Vue正在安装，但没有任何组件

这是一个Laravel 5.7应用程序，使用刀片模板并添加了一些Vue

这是初始代码：

import 'babel-polyfill'
import loadClientScripts from './load-client-scripts'
import 'bootstrap-material-design/js/'
// Vue & axios
import Vue from 'vue'
import { axios } from '../axios-config'

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'

import { createLocales } from '../vue-i18n-config'
import Noty from 'noty'
//Components
import signInForm from './components/SignInForm'
import signUpForm from './components/SignUpForm'
import forgotPassForm from './components/ForgotPassForm'
// import RegisterToAgency from './components/RegisterToAgency'
import SendEmailForm from './components/SendEmailForm'
import AgencyServiceCategories from './components/AgencyServiceCategories'
import DropdownWithCheckboxes from './components/DropdownWithCheckboxes'
import LasiCoalitionAgencies from './components/LasiCoalitionAgencies'
import ServiceProviders from "./components/ServiceProviders";
import ServiceProvider from "./components/ServiceProvider";
import vSelect from "vue-select";

window.axios = axios

Vue.component('v-select', vSelect)

// Bootstrap Vue    
Vue.use(BootstrapVue)
export function createApp() {
  const i18n = createLocales(window.locale)

  // Components
  Vue.component('sign-in-form', signInForm)
  Vue.component('sign-up-form', signUpForm)
  Vue.component('forgot-pass-form', forgotPassForm)
  // Vue.component('register-to-agency', RegisterToAgency)
  Vue.component('send-email-form', SendEmailForm)
  Vue.component('agency-service-categories', AgencyServiceCategories)
  Vue.component('dropdown-with-checkboxes', DropdownWithCheckboxes)
  Vue.component('lasi-coalition-agencies', LasiCoalitionAgencies)
  Vue.component('service-providers', ServiceProviders)
  Vue.component('service-provider', ServiceProvider)


  new Vue({
    i18n
  }).$mount('#app')

}

<template>
  <div>
    <b-form
      id="sign-in-form"
      @submit="onSubmit"
    >
      <div class="form-group">
        <b-form-input
          id="sgi-email"
          v-model="model.email"
          required
          name="email"
          :state="state('email')"
          type="email"
          :placeholder="$t('validation.attributes.email_address')"
        />
        <b-form-feedback>{{ feedback('email') }}</b-form-feedback>
      </div>

      <div class="form-group mb-3">
        <b-form-input
          id="sgi-password"
          v-model="model.password"
          required="required"
          name="password"
          :state="state('password')"
          type="password"
          :placeholder="$t('validation.attributes.password')"
        />
        <b-form-feedback>{{ feedback('password') }}</b-form-feedback>
      </div>
      <div class="form-group my-0">
        <a
          class="text-opacity forgot-pass-link"
          href="#"
        >
          {{ $t('labels.user.password_forgot') }}
        </a>
      </div>
    </b-form>
  </div>
</template>

<script>
  console.log('IM HIT')
export default {
  name: 'SignInForm',
  data() {
    return {
      model: {
        email: '',
        password: ''
      },
      validation: {}
    }
  },
  mounted() {
    this.test()
  },
  methods: {
    test() {
      console.log("test")
    },
    feedback(name) {
      if (this.state(name)) {
        return this.validation.errors[name][0]
      }
    },
    state(name) {
      return this.validation.errors !== undefined &&
        this.validation.errors.hasOwnProperty(name)
        ? 'invalid'
        : null
    },
    onSubmit(evt) {
      evt.preventDefault()
      window.axios
        .post('/login', this.model)
        .then(response => {
          location.href = '/app'
        })
        .catch(e => {
          if (e.response.status === 422) {
            this.validation = e.response.data
            return
          }
        })
    }
  }
}
</script>

登录表单组件，例如：

import 'babel-polyfill'
import loadClientScripts from './load-client-scripts'
import 'bootstrap-material-design/js/'
// Vue & axios
import Vue from 'vue'
import { axios } from '../axios-config'

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'

import { createLocales } from '../vue-i18n-config'
import Noty from 'noty'
//Components
import signInForm from './components/SignInForm'
import signUpForm from './components/SignUpForm'
import forgotPassForm from './components/ForgotPassForm'
// import RegisterToAgency from './components/RegisterToAgency'
import SendEmailForm from './components/SendEmailForm'
import AgencyServiceCategories from './components/AgencyServiceCategories'
import DropdownWithCheckboxes from './components/DropdownWithCheckboxes'
import LasiCoalitionAgencies from './components/LasiCoalitionAgencies'
import ServiceProviders from "./components/ServiceProviders";
import ServiceProvider from "./components/ServiceProvider";
import vSelect from "vue-select";

window.axios = axios

Vue.component('v-select', vSelect)

// Bootstrap Vue    
Vue.use(BootstrapVue)
export function createApp() {
  const i18n = createLocales(window.locale)

  // Components
  Vue.component('sign-in-form', signInForm)
  Vue.component('sign-up-form', signUpForm)
  Vue.component('forgot-pass-form', forgotPassForm)
  // Vue.component('register-to-agency', RegisterToAgency)
  Vue.component('send-email-form', SendEmailForm)
  Vue.component('agency-service-categories', AgencyServiceCategories)
  Vue.component('dropdown-with-checkboxes', DropdownWithCheckboxes)
  Vue.component('lasi-coalition-agencies', LasiCoalitionAgencies)
  Vue.component('service-providers', ServiceProviders)
  Vue.component('service-provider', ServiceProvider)


  new Vue({
    i18n
  }).$mount('#app')

}

<template>
  <div>
    <b-form
      id="sign-in-form"
      @submit="onSubmit"
    >
      <div class="form-group">
        <b-form-input
          id="sgi-email"
          v-model="model.email"
          required
          name="email"
          :state="state('email')"
          type="email"
          :placeholder="$t('validation.attributes.email_address')"
        />
        <b-form-feedback>{{ feedback('email') }}</b-form-feedback>
      </div>

      <div class="form-group mb-3">
        <b-form-input
          id="sgi-password"
          v-model="model.password"
          required="required"
          name="password"
          :state="state('password')"
          type="password"
          :placeholder="$t('validation.attributes.password')"
        />
        <b-form-feedback>{{ feedback('password') }}</b-form-feedback>
      </div>
      <div class="form-group my-0">
        <a
          class="text-opacity forgot-pass-link"
          href="#"
        >
          {{ $t('labels.user.password_forgot') }}
        </a>
      </div>
    </b-form>
  </div>
</template>

<script>
  console.log('IM HIT')
export default {
  name: 'SignInForm',
  data() {
    return {
      model: {
        email: '',
        password: ''
      },
      validation: {}
    }
  },
  mounted() {
    this.test()
  },
  methods: {
    test() {
      console.log("test")
    },
    feedback(name) {
      if (this.state(name)) {
        return this.validation.errors[name][0]
      }
    },
    state(name) {
      return this.validation.errors !== undefined &&
        this.validation.errors.hasOwnProperty(name)
        ? 'invalid'
        : null
    },
    onSubmit(evt) {
      evt.preventDefault()
      window.axios
        .post('/login', this.model)
        .then(response => {
          location.href = '/app'
        })
        .catch(e => {
          if (e.response.status === 422) {
            this.validation = e.response.data
            return
          }
        })
    }
  }
}
</script>

{{反馈（'email'）}
{{反馈（'password'）}
console.log（'IM HIT'）
导出默认值{
名称：“SignInfo”，
数据（）{
返回{
型号：{
电子邮件：“”，
密码：“”
},
验证：{}
}
},
安装的（）{
这个测试（）
},
方法：{
测试（）{
控制台日志（“测试”）
},
反馈（姓名）{
如果（本州（名称））{
返回此。验证。错误[名称][0]
}
},
州（名称）{
返回this.validation.errors！==未定义&&
this.validation.errors.hasOwnProperty（名称）
“无效”
：null
},
onSubmit（evt）{
evt.preventDefault（）
window.axios
.post（'/login'，this.model）
。然后（响应=>{
location.href='/app'
})
.catch（e=>{
如果（e.response.status===422）{
this.validation=e.response.data
返回
}
})
}
}
}

任何想法都有帮助

在示例登录表单中，控制台确实输出了我放置的“Im hit”，以确保加载了内容

---

谢谢

您是否在任何时候使用该Vue实例渲染任何内容

尝试将组件传递到其渲染函数，如下所示：

//让我们假设您从某个文件App.vue导入了一个组件，并将该组件简单地称为“App”
//例如：const App=require（“./App.vue”）或从“./App.vue”导入应用程序；
Vue.use（BootstrapVue）
导出函数createApp（）{
const i18n=createLocales（window.locale）
//组成部分
Vue.component（'sign-in-form'，SignInfo）
Vue.组件（'sign-up-form'，signUpForm）
Vue.component（'forgot-pass-form'，forgotPassForm）
//Vue.组件（“注册到代理”，注册代理）
Vue.component（'send-email-form'，sendmailform）
Vue.组件（‘代理服务类别’、代理服务类别）
Vue.component（'dropdown-with-checkbox'，dropdownwithcheckbox）
Vue.组件（“lasi-联盟机构”，lasi-联盟机构）
Vue.component（'service-providers'，ServiceProviders）
Vue.组件（'服务提供商'，服务提供商）
新Vue({
i18n，
render:createElement=>createElement（应用）//需要一个渲染函数
}).$mount（“#应用程序”）
}

您是否在任何时候使用该Vue实例渲染任何内容

尝试将组件传递到其渲染函数，如下所示：

//让我们假设您从某个文件App.vue导入了一个组件，并将该组件简单地称为“App”
//例如：const App=require（“./App.vue”）或从“./App.vue”导入应用程序；
Vue.use（BootstrapVue）
导出函数createApp（）{
const i18n=createLocales（window.locale）
//组成部分
Vue.component（'sign-in-form'，SignInfo）
Vue.组件（'sign-up-form'，signUpForm）
Vue.component（'forgot-pass-form'，forgotPassForm）
//Vue.组件（“注册到代理”，注册代理）
Vue.component（'send-email-form'，sendmailform）
Vue.组件（‘代理服务类别’、代理服务类别）
Vue.component（'dropdown-with-checkbox'，dropdownwithcheckbox）
Vue.组件（“lasi-联盟机构”，lasi-联盟机构）
Vue.component（'service-providers'，ServiceProviders）
Vue.组件（'服务提供商'，服务提供商）
新Vue({
i18n，
render:createElement=>createElement（应用）//需要一个渲染函数
}).$mount（“#应用程序”）
}

那么，它们为什么不加载呢？它是否会给你某种错误信息？您是否检查了Vue.js开发工具以查看Vue运行时及其状态在后台是什么样子的？在Vue开发工具中，我看到了，没有其他内容。如果我使用$vm0查看控制台，它没有子项。根据提供的代码，没有其他子项。您只注册组件。实际使用这些组件时是否有任何Vue标记？控制台是否报告任何错误消息？如果这是一个完全设计的应用程序，其中的元素突然消失，这意味着应用程序中的渲染过程中出现了一些错误（但是，发布的代码中似乎没有出现错误，除非嵌入此JS的HTML中没有ID为

#app

的HTML元素）有一个#app，我首先检查的一件事是：P.将在初始问题中添加一个组件。我的意思是，根据您拥有的代码，没有组件被传递到

新的Vue

实例，因此即使您发布标记，也不可能是通过装载新的Vue实例来呈现的标记。您需要在

new Vue

选项中实际指定一个组件，例如：

new Vue（{i18n，render:h=>h（RootVueComponentHere）}）。$mount（'#app'）

其中

RootVueComponentHere

需要是根组件（可能只是其中包含

路由器视图的组件）那么，为什么它们不加载呢？它是否会给你某种错误信息？您是否检查了Vue.js开发工具以查看Vue运行时及其状态在后台是什么样子的？在Vue开发工具中，我看到了，没有其他内容。如果我使用$vm0查看控制台，它没有子项。根据提供的代码，没有其他子项。您只注册组件。实际使用这些组件时是否有任何Vue标记？控制台是否报告任何错误消息？如果这是一个完全设计的应用程序，其中的元素突然消失，这意味着在应用程序的渲染过程中出现了一些错误（但是，看起来并没有发生这种错误）