Précompilation des composants TypeScript Vue avec la chaîne de modèles

Question

J'ai un site Vue construit avec Webpack. J'ai un fichier d'enregistrement qui contient un composant:

// my-component.ts 

import Vue = require('vue'); 

export default Vue.component("my-component", { 
    template: "<div>I am a component</div>" 
}); 

Lorsque je tente d'utiliser ce composant, je reçois l'avertissement suivant:

Vous utilisez le moteur d'exécution seule la construction de Vue où l'option de modèle n'est pas disponible. Pré-compilez les modèles dans des fonctions de rendu ou utilisez la compilation incluse dans le compilateur.

Maintenant: comment pré-compiler ce modèle? Je sais que je peux define a .vue file et même utiliser TypeScript à l'intérieur de <script></script>, mais je préférerais définir mon composant en TypeScript pur afin que j'obtienne un bon support de TypeScript dans WebStorm.

Est-ce possible?

---

(je sais que je peux aussi aller avec la deuxième option en créant un alias pour la construction inclus compilateur à vue/dist/vue.js mais je me sens comme cela me donne une pénalité de performance. Il ajoute, à tout le moins 20kb à . mon build)

---

Answer 1

Vous devriez être en mesure d'utiliser le standalone build pour ce faire, il suffit d'ajouter ce qui suit à votre config webpack (ce qui est le plus récent Vue de presse):

resolve: { 
    alias: { 
    'vue$': 'vue/dist/vue.common.js' 
    } 
} 

Et il devrait tirer dans la construction autonome pour vous, qui comprend l'option de modèle.

---

Si vous voulez avoir un aller à créer votre propre render functions alors vous pouvez. Au plus basiquement vous obtiendrez:

Vue.component('msg', { 
    functional: true, 
    render: (createElement, context) => { 
    return createElement('div', context.props.message) 
    }, 
    props: ['message'] 
}) 

Il est un peu plus complexe, mais en fait pas trop mal si vous n'aimez vraiment pas l'idée d'utiliser .vue fichiers et vos modèles sont relativement simples, voici le violon pour le composant ci-dessus:

https://jsfiddle.net/et67zqdp/

Il est alors utile de jeter un coup d'œil à:

https://vuejs.org/v2/guide/render-function.html