web-dev-qa-db-fra.com

Comment utiliser vue-loader sans vue-cli

J'essaie de rassembler le strict minimum absolu d'un projet Vue qui utilise webpack pour transpiler des fichiers .vue.

Mon objectif est de comprendre chaque étape de construction en détail. La plupart des tutoriels conseillent d'utiliser vue-cli et d'utiliser la configuration webpack-simple. Et bien que cette configuration fonctionne, il semble exagéré pour mon but simple. Pour l'instant, je ne veux pas de babel, de peluches ou d'un serveur Web actif avec rechargement de module à chaud.

Un exemple minimal avec seulement import Vue from 'vue' fonctionne! Webpack compile la bibliothèque Vue et mon propre code en un seul paquet.

Mais maintenant, je veux ajouter vue-loader à la configuration du webpack, afin que les fichiers .vue soient transpilés. J'ai installé vue loader:

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

Et j'ai ajouté vue-loader à la configuration du 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'
    }
  }
};

J'ai créé bonjour.vue

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

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

Et dans mon application, j'importe 'bonjour'

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!")
      }
    })

Le chargeur ne semble pas ramasser les fichiers .vue, j'ai l'erreur:

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

MODIFIER

En essayant de import hello from 'hello.vue' j'obtiens l'erreur:

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

Est-ce que je manque une étape? Est-ce que j'importe le composant .vue de la bonne façon? Comment utiliser le composant hello.vue à partir de app.js?

webpackvue.js
12
Kokodoko

Tout d'abord, vous n'importez pas le fichier correctement. Vous devriez l'importer comme ceci:

import Hello from './hello.vue'

Deuxièmement, après avoir importé le composant, vous devrez quand même l'enregistrer. Faites ceci globalement Vue.component('hello', Hello), ou sur l'instance Vue:

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

Remarque: si vous souhaitez pouvoir importer le fichier sans avoir à spécifier l'extension .vue, vous pouvez spécifier que l'extension .vue soit résolue dans votre fichier de configuration. 

Dans ce cas, l'objet resolve dans votre fichier de configuration devrait ressembler à ceci:

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

Voici la documentation sur resolve.extensions.

11
thanksd

En plus de @thanksd répondre:

A partir de vue-loader v15, un plugin est requis:

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

https://vue-loader.vuejs.org/guide/

1
lukebearden

Marquer sur quelques informations supplémentaires ici avec @lukebearden et @thanksd. Configurez une application Vue à partir du sol, elle est basique et j'ai déchiré un peu le style car je ne voulais pas m'en occuper: mais cela compile ce que JS: 

https://github.com/ed42311/gu-vue-app

Peut confirmer sur le plugin, et je n'ai pas ajouté la résolution, mais maintenant je vais :)

Faites-moi savoir si vous avez des idées.

0
ContextCue