vue+webpack 비동기 구성 요소 불 러 오 는 방법

8.9 업데이트:이전에 csdn 으로 이사 하려 고 했 을 때 초청 코드 문제 로 블 로 그 를 늦게 옮 기지 못 해서 블 로그 원 에 갔 는데 오늘 csdn 이 글 을 옮 겨 준 것 을 발 견 했 습 니 다.이 글 을 수정 할 필요 가 있 습 니 다.
이 글 을 쓸 때 vue 를 처음 접 했 기 때문에 장난 을 칠 때 약간 혼 란 스 러 웠 다.
---------------------------
간단 한 일 로 오래 고생 했 는데
1.vue 문 서 는 Vue.component('compname',function(resolve,reject){})리 셋 에서 ajax 가 구성 요소 정의 내용 을 불 러 오 는 예 입 니 다.그러나 지금 은 습관 적 으로 vue 파일 이 구성 요 소 를 쓰 고 있 습 니 다.루트 를 클릭 하여 vue 를 가 져 올 때 어떻게 합 니까?
2.webpack 의 coding-split 는 comonjs/amd 문법 을 지원 합 니 다.즉,서로 다른 실현 이 있 습 니 다.인터넷 에서 n 여 사례 가 난잡 한 것 을 찾 아 보 았 는데,마지막 으로 두 가지 작법 을 확정 하 였 다.
commonjs 문법:const setting=resolve=>require.sure([],()=>resolve(require('./components/setting.vue'),'setting');
문서 작성 방법:resolve=>require(['./coponents/setting.vue')],resolve);/게으르다
당시 에 저 는 경로 와 결합 하여 연습 을 했 습 니 다.첫 번 째 로 github 에서 보 았 습 니 다.require.ensure 는 webpack 의 문법 입 니 다.포장 할 때 require.ensure 부분 에서 지정 한 코드 를 잘라 서 다른 chunk 에 포장 하고 webpack.config.js 에 chunk FileName 항목 을 추가 하면 됩 니 다.require.ensure 의 세 가지 매개 변 수 는 의존 적 인 url,반전,사용자 정의 chunk 의 이름 입 니 다.
사실 codesplit 는 본질 적 으로 require 모듈 을 따로 포장 하고 사용 할 때 브 라 우 저 에서 비동기 로 가 져 오 며 scriptdom 형식 으로 head 에 삽입 하 는 것 입 니 다.이것 은 기본 적 인 실현 입 니 다.내 가 시도 할 때 비동기 구성 요 소 를 가 져 올 때마다 head 에 두 개의 탭,하나의 script,yigestyle 을 삽입 합 니 다.vue 파일 은 최종 적 으로 html,css,js 로 해석 되 기 때 문 입 니 다.
PS:사실 webpack 홈 페이지 의 예제 코드 는 resolve=>라 는 쓰기 가 없 었 습 니 다.함수 에서 require.ensure 를 직접 사용 하면 됩 니 다.처음에는 의 심 스 러 웠 습 니 다.인터넷 에서 설명 을 찾 을 수 없 었 습 니 다.자신 이 연구 한 결과 require.ensure 라 는 함 수 를 발 견 했 습 니 다.webpack 을 포장 하여 컴 파일 한 후에
하나webpack_require_.e 의 함수,그 자체 가 thenable 인 스 턴 스 입 니 다.require.ensure 의 리 셋webpack_require_.e.then(fn)에서 이번 에는 분명 합 니 다.webpack 의 이 문법 자 체 는 promise 인 스 턴 스 여야 합 니 다.위 에서 vue 구성 요 소 를 가 져 오 는 쓰기 에서 require.ensure 는 봉 인 된 문법 이기 때문에 resolve 를 부모 함수 에 전송 할 수 밖 에 없습니다.require.ensure 의 반전 에서 역할 도 메 인 체인 을 통 해 가 져 오고 호출 할 수 밖 에 없습니다.이것 은 resolve 함수 가 반드시 promise 의 함수 매개 변수 에 있어 야 하 는 것 이 아니 라 그 출현 위 치 는 유연 하 게 설정 할 수 있다 는 것 을 밝 혔 다.완 일 봉 선생님 의 ES6 입문 에서 언급 한 바 와 같이 resolve 함 수 는 js 엔진 이 제공 할 수 있 고 스스로 배치 할 필요 가 없다.
이상 건 너 뛸 수 있 습 니 다.
우선 비동기 구성 요소 의 사용 은 처음 접 촉 했 을 때 생각 했 던 것 만큼 복잡 하지 않다.
1.홈 페이지 를 이용 하 는 방식 이 가능 하 다 면:
HTML：

<input type="button" @click="showchild" value="show"> //     ，show  ,   child  ，   div  
<div id="contain" v-if="show">
 <child></child>
 </div>

JS：

//...
data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   show:false
  }
 },
 methods: {
  showchild:function(){
   this.show=true;
   }
 },
 components: {
   'child': function(resolve) {
    require(['./components/child.vue'], resolve);
 }

*메모:비동기 구성 요 소 를 불 러 올 때 구성 요소 이름 뒤에 있 는.vue 를 무시 하지 마 십시오.
이 예 는 비교적 직관 적 이 어야 한다.단 추 를 누 르 면 변수 쇼 의 불 값 을 진짜 로 바 꿉 니 다.child.vue 는 비동기 구성 요소 이기 때문에 ajax 에서 구성 요 소 를 가 져 와 렌 더 링 합 니 다.
많은 경우 비동기 구성 요 소 는 vue-router 에 맞 춰 보 기 를 전환 합 니 다.이 럴 때 는 어떤 문법 을 사용 하 든 좋 습 니 다.

이상 의 vue+webpack 에서 비동기 구성 요 소 를 불 러 오 는 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.