Vue 구성 요소가 기본 Vue 인스턴스를 작동하지만 Vue 라우터 구성 요소에서 작동하지 않음
나는 내 앱을 위한 메인 요소(#app)와 함께 라라벨/뷰 앱을 설치했다.블레이드.php 파일그런 다음 vue 인스턴스를 시작하는 app.js 파일이 있다.그리고 내 경로도 있고, j와 myComponent도 있어vue 파일
마이콤포넨트에서.vue 나는 vue-winwheel을 로드하려고 한다.하지만 계속 이런 경고를 받고 있어
[부유 경고]:알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록하셨습니까?재귀 구성 요소의 경우 "이름" 옵션을 제공하십시오.
그리고 부품이 로드되지 않는다.환영할 때 직접 사용한다면.blade.php 파일은 로드되지만, 물론 잘못된 위치에 저장된다.
나는 VueWinwheel을 전세계적으로 등록했다. (VueWinwheel과 Vue-Winwheel을 모두 테스트했다.)내가 뭘 놓쳤는지 아는 사람?
app.js
import Vue from 'vue';
import Vuex from 'vuex'
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue'
import VueWinwheel from 'vue-winwheel/vue-winwheel'
import routes from './routes';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(Vuex);
Vue.use(VueRouter);
Vue.use(BootstrapVue);
Vue.use(VueWinwheel);
require('./bootstrap');
let app = new Vue({
el: '#app',
router: new VueRouter(routes),
components: {
VueWinwheel
}
});환영하다칼날.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="icon" type="image/png" href="{{ asset('images/FavIcon-64.png') }}" />
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
<title>My App with VueWinwheel</title>
</head>
<body>
<div id="app" class="col-xs-12 text-center">
<transition name="slideFade" mode="out-in">
<router-view></router-view>
</transition>
<vue-winwheel /> <!-- This one does work -->
</div>
<script src="/js/app.js"></script>
</body>
</html>MyComponent.부에를 하다
<template>
<section class="winwheel-section">
<vue-winwheel /> <!-- This one does not work and makes the warning show in console -->
</section>
</template>
<script>
module.exports = {
data: function(){
return {
}
}
}
</script>라우터.js
import MyComponent from './components/MyComponent';
export default{
mode: 'history',
routes: [
{
path: '/',
component: MyComponent,
name: 'MyComponent'
}
]
}갱신하다
나는 @AbdulAzez Olanrewaju가 제안한 것을 시도해 본 적이 있다(그전에 시도해 본 적이 있다).하지만 이로 인해 npm vue 워치 터미널에 오류가 생겼다.
"-!//../node_node/babel-loader/lib/index.js에서 내보내기 'default'('mod'로 표시됨)를 찾을 수 없음?ref---4-0!/../../node_node/vue-loader/lib/index.js?부에로더-레저-호주-호주-호주!/spin.vue?vue&type=script=js&''
네가 바꿔볼 수도 있고.
let app = new Vue({
el: '#app',
router: new VueRouter(routes),
components: {
VueWinwheel
}
});
로
let app = new Vue({
el: '#app',
router: new VueRouter(routes),
components: {
'vue-winwheel': VueWinwheel
}
});
또한 나는 당신이 Vue.use를 사용할 필요가 없다고 생각한다.
나는 답을 찾았다.
MyComponent 내에서 Winwheel을 가져올 수 없었다.module.exports를 사용했기 때문에 vue.내가 수출 디폴트를 사용했을 때 그것은 효과가 있었다.
자:
<!-- This -->
<script>
export default {
data: function(){
return {
}
}
}
</script>
<!-- Instead of this -->
<script>
module.exports = {
data: function(){
return {
}
}
}
</script>
<!-- Note that I also remove the = after module.exports'programing' 카테고리의 다른 글
| 라인 0: 구문 분석 오류: 정의되지 않은 속성 'map'을 읽을 수 없음 (0) | 2022.03.26 |
|---|---|
| 로컬 컴퓨터 또는 웹 리소스에서 이미지 또는 그림을 주피터 노트북에 내장하는 방법 (0) | 2022.03.26 |
| Vue router2가 깊은 중첩 경로를 캡처하지 않음 (0) | 2022.03.26 |
| 마운트된 Vue 트리거 감시 (0) | 2022.03.26 |
| Reducx 상태가 mapStateToProps에서 정의되지 않음 (0) | 2022.03.26 |