programing

vue-router를 가져오는 동안 Vue가 정의되지 않았음

yoursource 2022. 10. 23. 16:16
반응형

vue-router를 가져오는 동안 Vue가 정의되지 않았음

vue-cli를 사용하여 새 프로젝트를 만들었습니다.vue init webpack-simple my-app명령어.새로 만든 설치 복사본에서 기본적으로 생성된 App.vue 구성 요소에서 vue-router를 가져오려고 합니다.하지만 그것은 나에게 오류를 주고 있다:Uncaught ReferenceError: Vue is not defined'. App.vue에서 vue를 다시 Import하면 앱은 정상적으로 동작합니다.하지만 이미 main.js에서 vue를 Import했는데 App.js에서 다시 Import해야 하는 이유는 무엇입니까?main.js에서 Import한 vue를 사용할 수 있는 방법이 있습니까?코드는 다음과 같습니다.

main.filename:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  import Vue from 'vue';   //**why I need to import it again? I already imported it in main.js
  import VueRouter from 'vue-router';
  Vue.use(VueRouter);

  import QuestionOne from './components/QuestionOneTemplate';

  const routes = [
    { path: '/', name: 'QuestionOne', component: QuestionOne },
  ];

  const router = new VueRouter({
    routes
  });

  window.router = router;

  export default {
    router,
    name: 'app',
    data () {
      return {
      }
    }
  }
</script>

<style lang="scss">
</style>

main.js에서 Import한 vue를 사용할 수 있는 방법이 있습니까?

아니요, 에서 사용하는 모든 파일에 Import해야 합니다.Vue. Imports/Requirements는 연결 방법입니다.각 Import는 동일한 싱글톤 인스턴스가 되므로 안심하십시오.

Vue 컴포넌트의 Javascript에서 라우터에 접속하려면this.$router그리고.this.$routeImport 없이 또는 템플릿 내에서 간단히 사용$router그리고.$route

권장되지 않지만 Vue를 main.js의 글로벌에 할당하고 가져오지 않고 글로벌을 사용할 수 있습니다.

main.discloss.main.discloss.

import Vue from 'vue';
global.MyVue = Vue

App.vue

import VueRouter from 'vue-router';

MyVue.use(VueRouter);

왜죠

이것이 ES6가 연결하는 방법입니다.생각해 봐wiring사용 가능한 Vue lib가 여러 개 있는 경우 링커는 어떤 Vue lib를 사용해야 하는지 어떻게 알 수 있습니까?다른 라이브러리가 Vue라는 변수 또는 함수를 정의했다면 어떻게 해야 할까요?lib는 이벤트버스나 기타 기능에 자체 내부 Vue를 사용할 수 있습니다.

기타 생각

또, 명시적인 Import에 의해서, IDE 자동 완성이나 구문 강조 표시의 기능이 향상됩니다.일부 IDE에서는 Import를 자동으로 추가할 수 있기 때문에 생활이 쉬워집니다.

이거 먹어봤어?

import Vue from 'vue' import VueRouter from 'vue-router'

그 후

Vue.use(VueRouter)

오류 메시지는 vue-module을 사용하려면 먼저 vue를 Import해야 함을 의미하기 때문입니다.

올바른 작업을 수행했으며 Vue를 여러 파일로 가져올 염려가 없습니다.애플리케이션을 출하하여 실가동용으로 빌드하는 경우 "Vue Import"는 1개뿐입니다.dist 폴더와 번들을 보면.jsVue는 한 번만 Import된다는 것을 알 수 있습니다.

언급URL : https://stackoverflow.com/questions/52272900/showing-vue-is-not-defined-error-while-importing-vue-router

반응형