Jak używać vue-loadera bez vue-cli

Question

Próbuję połączyć absolutnie nagi minimalny przykład projektu Vue, który używa WebPacka do transpozycji plików .vue.

Moim celem jest szczegółowe zrozumienie każdego kroku budowy. Większość samouczków zaleca używanie vue-cli i używanie konfiguracji webpack-simple. I chociaż ta konfiguracja działa, to wydaje mi się, że jest to przesada w moim prostym celu. Na razie nie chcę babel, linting ani live web server z ponownym doładowaniem modułu.

Minimalny przykład z tylko import Vue from 'vue' działa! Webpack kompiluje bibliotekę vue i mój własny kod w jeden pakiet.

Ale teraz, chcę dodać vue-loader do konfiguracji Web Pack, aby pliki .vue zostały transpiled. Mam zainstalowany ładowarka vue:

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

I dodałem vue-ładowarka do config WebPACK:

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' 
    } 
    } 
}; 

stworzyłem hello.vue

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

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

I w moim app import "cześć"

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 Ładowarka e nie wydaje się, aby podnieść .vue plików, pojawia się błąd:

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

EDIT

Podczas próby import hello from 'hello.vue' pojawia się błąd:

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

jestem brakuje krok? Czy importuję składnik .vue we właściwy sposób? Jak korzystać z komponentu hello.vue z aplikacji app.js?

Answer 1

Po pierwsze, nie importujesz pliku poprawnie. Powinieneś go zaimportować w następujący sposób:

import Hello from './hello.vue' 

Po drugie, po zaimportowaniu komponentu nadal musisz go zarejestrować. Albo zrobić to globalnie Vue.component('hello', Hello) lub na przykład Vue:

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

---

Na marginesie, jeśli chcesz, aby móc importować plik bez konieczności określić rozszerzenie .vue, można określić, że .vue rozszerzenie powinno zostać rozwiązane w pliku konfiguracyjnym.

W tym przypadku obiekt w pliku konfiguracyjnym resolve powinna wyglądać następująco:

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

Here's the documentation on resolve.extensions.