vue-cli없이 vue-loader를 사용하는 방법

Question

webpack을 사용하여 .vue 파일을 변환하는 Vue 프로젝트의 절대적인 최소한의 예제를 작성하려고합니다.

제 목표는 각 빌드 단계를 자세히 이해하는 것입니다. 대부분의 자습서는 vue-cli을 사용하고 webpack-simple 구성을 사용할 것을 권장합니다. 그리고 그 설정이 작동하지만, 내 간단한 목적 과잉으로 보인다. 지금은 바벨, linting 또는 뜨거운 모듈을 다시로드하는 라이브 웹 서버를 원하지 않습니다.

최소 예제는 import Vue from 'vue'입니다. Webpack은 vue 라이브러리와 자체 코드를 하나의 번들로 컴파일합니다.

하지만 지금은 .vue 개의 파일이 흐트러 지도록 webpack 구성에 vue-loader을 추가하고 싶습니다. 나는 VUE 로더 설치 한 :

npm install vue-loader 
npm install css-loader 
npm install vue-template-compiler 

을 그리고 나는 웹팩 설정에 VUE 로더를 추가했습니다 :

var path = require('path') 

module.exports = { 
    entry: './dev/app.js', 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      } 
     } 
     } 
    ] 
    }, 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' 
    } 
    } 
}; 

내가 만든 hello.vue

<template> 
    <p>{{greeting}} World</p> 
</template> 

<script> 
export default { 
    data:function(){ 
     return { 
      greeting:"Hi there" 
     } 
    } 
} 
</script> 

그리고 내 응용 프로그램 I에 '안녕하세요'가져 오기

import Vue from 'vue' 
import hello from "./hello.vue"; 

    new Vue({ 
     el: '#app', 
     template:`<div><hello></hello></div>`, 
     created: function() { 
     console.log("Hey, a vue app!") 
     } 
    }) 

Th 내가

Unknown custom element: <hello> - did you register the component correctly? 

실종 :

import hello from 'hello.vue'하려고 내가 오류를 얻을

Module not found: Error: Can't resolve './hello.js' 

편집 : 전자 로더 내가 오류의 .vue 파일을 선택하지 않는 것 걸음? .vue 구성 요소를 올바르게 가져오고 있습니까? app.js의 hello.vue 구성 요소는 어떻게 사용합니까?

Answer 1

먼저 파일을 올바르게 가져 오지 못합니다. 당신은 너무처럼 가져와야합니다 : 구성 요소를 가져온 후

import Hello from './hello.vue' 

둘째, 당신은 여전히 ​​어떻게 든에 등록해야합니다. 어느 쪽이 세계적으로 Vue.component('hello', Hello), 또는 뷰 인스턴스에서 수행하면 .vue 확장자를 지정하지 않고 파일을 가져올 수 있도록하려면

new Vue({ 
    el: '#app', 
    template:`<div><hello></hello></div>`, 
    components: { 'hello': Hello }, 
    created: function() { 
    console.log("Hey, a vue app!") 
    } 
}) 

보조 노트로

---

, 사용자가 지정할 수 있습니다 .vue 확장은 구성 파일에서 해결되어야합니다. 이 경우

, 설정 파일의 resolve 목적은 다음과 같아야합니다

resolve: { 
    alias: { 
    'vue$': 'vue/dist/vue.esm.js' 
    }, 
    extensions: ['.js', '.vue', '.json'] 
} 

Here's the documentation on resolve.extensions.