Question

我试图在我的Meteor项目中开始使用Vue 2两天。首先我查找了一些软件包，发现https://github.com/meteor-vue/vue-meteor，但除了软件包列表之外，它缺少任何可用的东西，所以就是这样。在Atmosphere上单独搜索产生了我可以实际使用的东西，即https://atmospherejs.com/akryum/vue，但是尽管遵循了我能找到的每个指令，但我认为它对我来说没有用，例如，我不喜欢＃39; t获取有关组件热重载的控制台消息，仅获取文件更改时常用的标准Meteor启动消息+消息。它没有使用client/main.html文件，除非我在client/main.js中明确导入它，但后来我收到关于丢失模块./main.html的运行时错误，即使我可以清楚然后看到渲染的模板，但没有Vue魔法。在提供的示例项目（没有Blaze）中，我没有看到HTML被明确地导入到任何地方，所以有些东西肯定是在这里。任何产生的输出都没有其他提示和线索。所以我陷入了困境。

P上。 S.我也刚刚意识到它甚至不对.vue组件做任何事情，因为1）我忘了将导入从.js更改为.vue，并且应用程序没有＆＃39; t随时崩溃，然后，导入的.vue文件实际上在语法上是不正确的，直到我刚才修复它。

Answer 1

对于Meteor + Vue的入门样板，完美的捆绑+包选择是Akryum的https://github.com/meteor-vue/vue-meteor-demo

我使用了它，并且毫无问题地部署到了银河系。优秀的开始。

此样板包含：流星1.4-1.7+ +跟踪器+ Vuejs 2 + vue-router + vuex（存储）+ graphql设置。

欢呼

Answer 2

我写了一篇文章，详细介绍了在Meteor应用程序中安装Vue和Vue Router的步骤。我不喜欢在Stackoverflow上放置链接，但是这里的答案中包含了太多细节。

https://medium.com/@simonjcarr/adding-vue-and-vue-router-to-meteor-7c411131494f

Answer 3

我正在使用以下设置。

包

.meteor /包

meteor-base@1.3.0             # Packages every Meteor app needs to have mobile-
experience@1.0.5              # Packages for a great mobile UX 
mongo@1.4.2                   # The database Meteor supports right now  
tracker@1.1.3                 # Meteor's client-side reactive programming library

standard-minifier-js@2.3.1    # JS minifier run for production mode 
es5-shim@4.7.0                # ECMAScript 5 compatibility for older browsers 
ecmascript@0.10.6             # Enable ECMAScript2015+ syntax in app code

shell-server@0.3.1            # Server-side component of the `meteor shell` command

static-html akryum:vue-component 
akryum:vue-blaze-template 
session@1.1.7 
check 
dynamic-import@0.3.0 
fourseven:scss 
seba:minifiers-autoprefixer

的package.json

{
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.44",
    "meteor-node-stubs": "~0.2.0",
    "@deveodk/vue-toastr": "^1.0.4",
    "babel-runtime": "^6.23.0",
    "bcrypt": "^1.0.2",
    "vue": "^2.2.6",
    "vue-router": "^2.5.1",
    "vuex": "^2.3.1"
  },
  "devDependencies": {}
}

客户端目录

的客户机/ main.html中

<body class="pace-done md-skin">
    <div id="app"></div>
</body>

的客户机/ main.scss

// Libs
import {Meteor} from 'meteor/meteor'
import Vue from 'vue'
import { router } from '/imports/client/plugins/router';
import store from '/imports/vuex/store'
import AppLayout from '/imports/client/ui/AppLayout.vue'

// import '/imports/client/plugins/plugin_name'

// App start
Meteor.startup(() => {
    new Vue({
        store,
        router,
        el: '#app',
        render: h => h(AppLayout)
    })
});

休息是标准的vue。我可以添加AppLayout.vue来证明我的意思

/imports/client/ui/AppLayout.vue

<template>

  <router-view></router-view>

</template>

<script>
  export default {
      name: 'AppLayout'
  }
</script>

Answer 4

在尝试集成这两种技术时，我开始记录自己的经验。如果您想查看更多内容：https://forums.meteor.com/t/meteor-vue-in-2018/44246

我的文件夹结构有些不同，但希望它仍然有意义。

Meteor 1.6.1和Vue 2集成

4 个答案: