Meteor 1.6.1 and Vue 2 integration

两天来，我试图在我的 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的运行时错误，即使我可以清楚地看到渲染的模板，但没有 Vue 魔术在其中。在提供的示例项目(没有 Blaze)中，我没有看到 HTML 在任何地方被显式导入，所以这里肯定有些东西。在任何生成的输出中都没有其他提示和线索。所以我陷入了困境。

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

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

我使用了它，并毫无问题地部署到银河系。良好的开端。

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

干杯

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

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

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

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

我正在使用以下设置。

包

.流星/包

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

包.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": {}
}

客户端目录

client/main.html

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

client/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。我可以添加 alseAppLayout.vue来证明我的意思

imports/client/ui/AppLayout.vue

<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'AppLayout'
}
</script>

相关内容

最新更新

热门标签：