Meteor 1.6.1 和 Vue 2 集成
Posted
技术标签:
【中文标题】Meteor 1.6.1 和 Vue 2 集成【英文标题】：Meteor 1.6.1 and Vue 2 integration 【发布时间】：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 可能有很多开发人员，但仍然缺乏对 *** 的支持。如果你想开始用流星学习 react js，非常简单，你可以关注 YouTube 上的 Levelup 教程。 如果您还在市场上寻找样板 - 前几天发现：“Vue + Meteor 产品的极简样板。” GitHub - alexandesigner/lets: 有很多'candy-floss' - Stylus 之类的 - 但除此之外，这是一个很好的开始 【参考方案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 的步骤。我不喜欢在 *** 上放置链接，但这里的答案中包含的细节太多了。
https://medium.com/@simonjcarr/adding-vue-and-vue-router-to-meteor-7c411131494f
【讨论】：
以上是关于Meteor 1.6.1 和 Vue 2 集成的主要内容，如果未能解决你的问题，请参考以下文章
在 Jasmine 中访问 Meteor 模板辅助函数以进行集成测试
将 Express.js-REST-Endpoint 与 Meteor 应用程序集成