webpack - Forhåndskompiler TypeScript Vue-komponenter med malstreng

Jeg har et Vue-nettsted som er bygget med Webpack. Jeg har en TypeScript-fil som inneholder en komponent:

// my-component.ts

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

Når jeg prøver å bruke denne komponenten får jeg følgende advarsel:

Du bruker runtime-only-versjonen av Vue hvor template-alternativet ikke er tilgjengelig. Enten forhåndskompilerer du malene til render-funksjoner, eller så bruker du versjonen som inkluderer kompilatoren.

Nå: hvordan forhåndskomilerer jeg denne malen? Jeg vet at jeg kan definere en .vue-fil og til og med bruke TypeScript inne i <script></script>, men jeg vil heller definere min komponent i ren TypeScript slik at jeg får god TypeScript-støtte i WebStorm.

Er dette mulig?

(Jeg vet at jeg også kan velge det andre alternativet ved å lage et alias for kompilatoren som er inkludert i bygget på vue/dist/vue.js, men jeg føler at dette gir meg en ytelsesstraff. I det minste legger det til 20kb i bygget mitt.)

Svar #1

Du bør kunne bruke standalone build for å gjøre dette, bare legg til følgende i din webpack-konfigurasjon (dette er for den nyeste Vue-utgivelsen):

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

Og det bør hente den frittstående versjonen for deg, som inkluderer malalternativet.

Hvis du vil prøve å lage dine egne render-funksjoner, kan du det. På det mest grunnleggende vil du få:

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

Det er litt mer komplekst, men egentlig ikke så ille hvis du virkelig ikke liker ideen om å bruke .vue-filer og malene dine er relativt enkle, her er fiddle for komponenten ovenfor:

https://jsfiddle.net/et67zqdp/

Det er da verdt å ta en titt på:

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

Svar #2

Jeg vet ikke om dette er den anbefalte måten eller ikke: Men jeg lager bare en fil i roten av prosjektet (samme sted som din "package.json" ligger) kalt

"vue.config.js"

module.exports = {
  runtimeCompiler: true
}

Relaterte artikler