web-dev-qa-db-fra.com

Comment enregistrer un composant Vue?

J'ai les fichiers suivants. Tout ce que je veux faire, c'est pouvoir créer différents composants qui sont injectés. Comment y parvenir en utilisant require.js? Voici mes fichiers:

main.js

define(function(require) {
    'use strict';
    var Vue = require('vue');
    var myTemplate = require('text!myTemplate.html');

    return new Vue({
        template: myTemplate,
    });
});

myTemplate.html

<div>
  <my-first-component></my-first-component>
</div>

MyFirstComponent.vue

<template>
  <div>This is my component!</div>
</template>

<script>
export default {}
</script>
javascriptvue.jsvue-component
12
KingKongFrog

Je vais supposer que vous utilisez webpack comme expliqué dans les documents Vue.js, sinon votre fichier .vue est inutile. Si ce n'est pas le cas, allez voir comment configurer un webpack Vue app d'abord, c'est ce qui vous permet d'utiliser les fichiers .vue.

import Menubar from '../components/menubar/main.vue';
Vue.component('menubar', Menubar);

Voilà comment vous ajoutez par exemple une barre de menu à l'échelle mondiale. Si vous souhaitez ajouter le composant à une petite partie seulement de votre application, voici une autre façon de le faire (cela est pris à l'intérieur d'un autre composant, mais peut être utilisé exactement de la même manière sur votre principal Vue objet):

import Sidebar from '../../components/sidebar/main.vue';
export default {
    props: [""],
    components: {
        'sidebar': Sidebar
    },
...

Vous pouvez charger des composants sans webpack, mais je ne le recommande pas, si vous continuez à utiliser Vue (ce que je vous suggère fortement de faire), cela vaut la peine d'étudier l'utilisation de webpack.

Mise à jour

Encore une fois, envisagez vraiment, vraiment, vraiment d'utiliser le webpack à la place si vous allez continuer avec Vue.js, la configuration peut être légèrement plus ennuyeuse mais le résultat final et le processus de développement sont mieux.

Quoi qu'il en soit, voici comment créer un composant sans webpack, notez que sans webpack, vous ne pouvez pas utiliser les fichiers .vue car le format .vue fait partie de leur plugin webpack. Si vous n'aimez pas la solution ci-dessous, vous pouvez également utiliser par exemple ajax demande de charger des fichiers .vue, je crois qu'il y a un projet quelque part là-bas qui fait cela, mais je ne le trouve pas pour le moment, mais le résultat final est meilleur avec webpack qu'avec ajax de toute façon, donc je recommanderais toujours d'y aller avec cette méthode.

var mytemplate = `<div>
<h1>This is my template</h1>
</div>`

Vue.component('mycomp1', {
    template: mytemplate
});

Vue.component('mycomp2', {
    template: `
        <div>
            Hello, {{ name }}!
        </div>
    `,
    props: ['name'],
});

Comme vous pouvez le voir, cette méthode est BEAUCOUP plus lourde. Si vous souhaitez utiliser cette méthode, je vous recommande de fractionner tous les composants dans leurs propres fichiers de script et de charger tous ces composants séparément avant d'exécuter votre application réelle.

Notez que `Text` est une chaîne de plusieurs lignes en javascript, cela facilite un peu l'écriture de votre modèle.

Et comme je l'ai dit, il existe un projet de chargement de fichiers .vue à l'aide d'ajax, mais je ne peux pas le trouver pour le moment.

15
Simon Hyll