Javascript 流星JS和Vue JS_Javascript_Node.js_Meteor_Web_Vue.js

Javascript 流星JS和Vue JS

javascript node.js meteor web vue.js

Javascript 流星JS和Vue JS,javascript,node.js,meteor,web,vue.js,Javascript,Node.js,Meteor,Web,Vue.js,我最近开始使用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 compile

我最近开始使用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

我对Meteor和Vue都是新手，所以答案可能很简单，但我不知道该怎么做，所以我希望能得到一些帮助！谢谢

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
    }
  });
}

<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>

<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;
}

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
    }
  }
};