使用模板字符串預編譯TypeScript Vue組件

Question

我有一個使用Webpack構建的Vue站點。我有一個包含一個部件的打字稿文件：

// my-component.ts 

import Vue = require('vue'); 

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

當我嘗試使用這個組件，我得到以下警告：

您使用的是僅運行時建立Vue公司的在模板選項不可用。可以將模板預編譯爲渲染函數，也可以使用編譯器包含的構建。

現在：我該如何預編譯這個模板？我知道我可以define a .vue file甚至在<script></script>裏面使用TypeScript，但我寧願用純的TypeScript定義我的組件，以便在WebStorm中獲得很好的TypeScript支持。

這可能嗎？

---

（我知道我還可以用第二個選項去通過vue/dist/vue.js創建編譯器包括構建一個別名，但我覺得這給了我一個性能損失。最起碼，它增加了20KB到。我的版本）

---

Answer 1

您應該能夠使用standalone build要做到這一點，只需添加以下到您的WebPack配置（這是最近發佈Vue）：

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

它應該爲您提供獨立構建，其中包含模板選項。

---

如果你想創建自己的render functions然後你可以。在它的最基本的，你會得到：

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

這是一個有點複雜，但其實不是太糟糕了，如果你真的不喜歡使用.vue文件的想法和你的模板是相對簡單的，下面是小提琴上述組件：

https://jsfiddle.net/et67zqdp/

它是那麼值得考慮看看：

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