Meteor 1.6.1 和 Vue 2 集成答案

【问题标题】：Meteor 1.6.1 and Vue 2 integrationMeteor 1.6.1 和 Vue 2 集成
【发布时间】：2018-09-07 00:20:12
【问题描述】：

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

P。 S. 我也刚刚意识到它甚至对 .vue 组件没有任何作用，因为 1) 我忘记将导入从 .js 更改为 .vue，并且应用程序在任何时候都没有崩溃，并且然后，导入的.vue 文件实际上在语法上是错误的，直到我刚刚修复它。

【问题讨论】：

即使我也面临同样的问题。我喜欢 vue js。但是你可以开始使用 react js，因为它拥有庞大的社区支持，并且 react js 正在流行起来。带有流星的 Vue js 可能有很多开发人员，但仍然缺乏对 Stackoverflow 的支持。如果你想开始用流星学习 react js，非常简单，你可以关注 YouTube 上的 Levelup 教程。
如果您还在市场上寻找样板 - 前几天发现：“Vue + Meteor 产品的极简样板。” GitHub - alexandesigner/lets: 有很多'candy-floss' - Stylus 之类的 - 但除此之外，这是一个很好的开始

标签： meteor vuejs2

【解决方案1】：

我正在使用以下设置。

包

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

Rest 是标准的 vue。我可以添加 AppLayout.vue 来说明我的意思

/imports/client/ui/AppLayout.vue

<template>

  <router-view></router-view>

</template>

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

【讨论】：

【解决方案2】：

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

我有一些不同的文件夹结构，但希望它仍然相关。

【讨论】：

【解决方案3】：

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

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

此样板包含： Meteor 1.4 - 1.7+ + tracker + Vuejs 2 + vue-router + vuex (store) + graphql 设置。

干杯

【讨论】：

【解决方案4】：

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

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

【讨论】：