如何编译Vuejs单文件组件?

时间:2016-10-17 16:07:43

标签: javascript vue-component vue.js vuejs2

我正在使用Vuejs 2(webpack-simple模板),我想知道如何在渲染之前编译模板。在我的代码下面:

App.vue

<template>
    <div id="app">
        <h1>{{ msg }}</h1>
    </div>
</template>
<script>
    export default {
        name: 'app'
    }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

const res = Vue.compile(App)
const vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    },
    render: res.render,
    staticRenderFns: res.staticRenderFns
})

这是我启动服务器时遇到的错误:__WEBPACK_IMPORTED_MODULE_0_vue___default.a.compile is not a function

我也试过这个插件vue-template-compiler而没有运气。你能帮助我让它发挥作用吗?提前谢谢。

1 个答案:

答案 0 :(得分:4)

您需要在webpack的配置中使用此设置:

resolve: {
  alias: {
    'vue$': 'vue/dist/vue'
  }
}

尽管出现此问题:http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build