我最近开始使用Meteor平台和Vuejs框架部署Web应用程序。我两天前从GITHUB下载了一个示例项目,它运行正常。昨天我更新了Vue,现在我得到了:
[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions or use the compiler-included build.
这些是我目前的档案: Main.js
import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import './main.html';
Session.setDefault("counter", 0);
Template.hello.helpers({
counter() {
return Session.get("counter");
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
Session.set("counter", Session.get("counter")+1);
},
});
import {Vue} from 'meteor/akryum:vue';
import Widget from '/imports/ui/Widget.vue';
Template.vue_demo.rendered = function() {
var vm = new Vue({
el: '#vue-demo',
template: '<div><widget></widget></div>',
components: {
Widget
}
});
}
main.html中
<head>
<title>vue-blaze</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
{{> vue_demo}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
<template name="vue_demo">
<div id="vue-demo"></div>
</template>
Widget.vue
<template>
<div class="widget">
<div>Hello {{name}}!</div>
<input v-model="name" placeholder="Enter your name" />
<div>
You've pressed the button {{counter}} times (inside vue component).
</div>
</div>
</template>
<script>
import {Session} from 'meteor/session';
export default {
data() {
return {
name: 'world',
counter: 0
}
},
meteor: {
data: {
counter() {
return Session.get("counter");
}
}
}
}
</script>
<style scoped>
.widget {
background: #a0ddc4;
padding: 12px;
border-radius: 3px;
width: 300px;
border-bottom: solid 1px #40b883;
}
我已经读过错误与需要编译器设置以呈现模板有关,为此我必须在我的'webpack.config'中创建一个别名,我做了:
var webpack = require('webpack');
module.exports = {
entry: './script.js',
devtool: 'inline-source-map',
output: {
filename: 'compiled.js'
},
resolve: {
extensions: ['', '.js'],
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
};
我是Meteor和Vue的新手,所以答案很简单,但我不知道该怎么做,所以我很感激一些帮助!谢谢!