Vue 2單個文件組件不適用於僅運行時版本

我嘗試使用單個文件組件與只運行時構建。當我使用完整的vue構建萬物時，可以按預期工作。我認爲單個文件組件是預編譯的。爲什麼當我使用僅限運行時版本時不會呈現組件。Vue 2單個文件組件不適用於僅運行時版本

這裏是我的設置：

webpack.config.js：

const webpack = require('webpack'); 
const webpackConfig = { 
entry: "./src/main.ts", 
output: { filename: "dist/bundle.js" }, 
resolve: { 
    alias: { 
     vue: 'vue/dist/vue.runtime.esm.js' 
      //vue: 'vue/dist/vue.esm.js', 
    } 
}, 
module: { 
    rules: [{ 
      test: /\.ts$/, 
      exclude: /node_modules|vue\/src/, 
      loader: 'ts-loader', 
      options: { 
       appendTsSuffixTo: [/\.vue$/] 
      } 
     }, 
     { 
      test: /\.vue$/, 
      loader: 'vue-loader', 
      options: { 
       esModule: true 
      } 
     } 
    ] 
} 
} 

module.exports = webpackConfig;

main.ts

import Vue from "vue"; 
import MyFirstComponent from "./MyFirstComponent.vue"; 
import MySecondComponent from "./MySecondComponent.vue" 

Vue.component("my-first-component", MyFirstComponent); 
Vue.component("my-second-component", MySecondComponent); 

new Vue({ 
    el: "#app" 
});

MyFirstComponent.vue

<template> 
<div> 
    This is the first component! 
</div> 
</template> 
<script lang="ts"> 
import Vue from 'vue'; 
import Component from 'vue-class-component'; 

@Component 
export default class MyFirstComponent extends Vue { 
    public mounted() { 
     console.log("mounted!"); 
    } 
} 
</script>

的「MySecondComponent」與第一個相似。

任何人都可以解釋爲什麼這不與運行時只生成？

非常感謝！

來源

2017-06-21 Chrizzz

這是官方文檔： https://vuejs.org/v2/guide/installation.html#Terms

編譯：代碼，負責編制模板字符串到JavaScript渲染功能。

運行時：負責創建Vue實例，渲染和修補虛擬DOM等的代碼。基本上所有東西都不包括編譯器。

當使用僅限運行時構建時，排除編譯器將模板編譯爲JS呈現函數是必不可少的。換句話說，組件中的視圖（<template></template>中的HTML）將永遠不會被編譯，並且將永遠不會出現在DOM中，只有運行時版本。

來源

2017-06-22 05:56:50

Vue 2單個文件組件不適用於僅運行時版本

回答

相關問題