vueJS WebPack vue에서 javascript를 분리합니다.

Question

저는 VueJs를 배우고 vue-cli WebPack 템플릿을 사용하여 작동하는 응용 프로그램을 제작하는 방법을 안내했습니다. 모두 잘 작동합니다.

• 내가 별도의 파일 그래서 users.js에 users.vue에서 자바 스크립트를 이동 ... 지금
• VS2017 :하지만 난 조금의 OCD와 VS2017은 그래서 VUE 파일에 인라인 자바 스크립트를 포맷하지 않는 것을 미워 해요 행복하게 형식을 js 코드, 하이라이트 브래킷 쌍 등
• 원래 vue에 <script src>로 포함되어 있습니다.

  [Vue warn]: Failed to mount component: template or render function not defined. (found in <Users>) vue.esm.js (559,1)

  을 ... 그리고 분명히 구성 요소가로드되지 않습니다

는 지금 npm run dev 내가 얻을 때.

솔직히 말해서 나는보기가 시작될 때 손실이 조금 있습니다. js를 분리해서는 안되는 것을 시도하고 있습니까? 아니면 기본 WebPack 설정에 문제가 있습니까? 나는 실생활에서 튜토리얼을 넘어서서 컴포넌트를 재사용하고 분리 할 수있을 때 확실하게 j를 분리하는 것이 잘못되었다고 믿을 수 없다.

사이드 노트에는 VS2017의 Vue 파일에 인라인 자바 스크립트를 포맷하는 플러그인이 있습니까? 나는 VueJs 2017과 CodeMaid 확장을 가지고 있지만 어느 것도 코드 포맷팅을 도왔다.

나는 웹팩 템플릿으로 작동합니다 https://github.com/9swampy/SplitVueJs

Answer 1

https://forum.vuejs.org/t/split-js-out-from-vue-singlefilecomponent/8418/5?u=9swampy이 답변을 제공했습니다. 공정하게 GitHub 레포를 보지 않고는 내 질문에 세부 사항이 충분하지 않았습니다. 기본적으로 vue 가져 오기를 명시 적으로 users.vue로 지정하지 않아도 명명 충돌이 발생했으며 대신 users.js가 기본값으로 설정되었습니다. './components/Hello'

에서

수입 안녕하세요 '까지

수입 안녕하세요 App.vue를 업데이트 따라서

./components/Hello.vue '

... 문제가 해결되었습니다.

도현은 :

는 https://github.com/vuejs/vueify/issues/35이 가능해야한다 제안 되나 영업 이익은 수정을 찾지 않았다, 그냥 ... 일을 시작하지 발견

Answer 2

<template> 
//your template 
</template> 

<script> 
import users from './users.js'; 
export default users; 
</script> 

이에서 문제의 예를 만들었습니다.