Comment importer un composant dans Vuejs 2
Je suis vraiment confus au sujet de l'importation d'un VueJs composant.
Je suis en utilisant Vuejs 2.2.4, et j'ai besoin d'importer un Vuejs composant. Voici mon app.js
:
Vue.component('Test', require('./Test.vue'));
const app = new Vue({
el: '#vue-app',
});
Assumer app.js
est situé dans MyProject/js/app.js
Et voici mon composant SimpleCompnent.vue
:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Simple Component</div>
<div class="panel-body">
I'm an Simple component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Simple Component mounted.')
}
}
</script>
Assumer SimpleCompnent.vue
est situé dans MyProject/js/SimpleCompnent.vue
Semble de Vue ne peut pas charger le composant! Il met cette erreur dans le navigateur de la console:
Uncaught ReferenceError: require is not defined
Vous devez vous connecter pour publier un commentaire.
En effet,
require
ne peut pas être utilisé dans un contexte du navigateur, sans un soutien adéquat, de sorte que vous avez deux options:Créer (ou corriger) de soutien pour require.js dans votre application (voir comment ici). Dans une première étape, assurez-vous d'avoir une balise de script qui récupère require.js et a un
data-main
attribut qui pointe vers votre application de point d'entrée.Utiliser un CommonJS mise en œuvre pour le client, comme webpack ou browserify, donc
require
s peut être écrite naturellement dans le code côté client.Utiliser un autre module du système de mise en œuvre, par exemple sur le haut de system.js ou ES2015.
De toute façon, si vous avez choisi une mise en œuvre qui utilise
import
s (c'est à dire un ES2015 module de système), vous pouvez utiliser un transpiler que le bas-compile le code d'un niveau de langue du navigateur prend en charge (en évitant ces méchantsUnexpected token import
erreurs).Essayer:
Vous pouvez voir un exemple de ce ici.
Uncaught SyntaxError: Unexpected token import