Meteor+Vue 从入门到放弃

前一段时间忙完公司的项目开始闲下来,打算自己写个todolist什么的小应用,然后就跑去调研了一下nodejs环境下有那些比较好的框架写后端服务,本打算用express+sequelize写restful风格API的,可惜没找到更方便的工具快速制作,然后就遇到meteor。

meteor

meteor比起express还是使用restful规范的服务端来得更先进,用起来更舒服。
简单使用,只需要在服务端定义发布数据,在客户订阅的数据并能获得,当然这是归功于基于DDP协议的socket服务。

总结一下特点:

  1. 服务端与客户端编码风格一致(全TM是javascript)

  2. 极具实时性(数据基于websocket,模板可以动态加载)

  3. 集成了开源工具和框架(webpack、vue随意使用)

快速上手教程

教程坚持使用vue和webpack,所以这里有个问题,怎么才能跟meteor很好地结合一起呢?

答案:使用在meteor安装webpack支持!尤大的证言

先学基础,不喜欢的跳过也可以。
meteor基础教程传送门

快速开始

请git clone以下

https://github.com/lpreterite/meteor-vue-webpack-example

运行只需

$ npm i$ meteor

下文要讲的是,那些东西事必须的,比如在package.json这段:

# 设置的客户端与服务端入口文件"main": "src/server.js","browser": "src/client.js",

webpack.config.js需要指定root和热更新设置devServer

  "root": "./src",  "devServer":{    "host": "localhost",    "hot": true,    "inline": true,  },

定义你的数据对象

# collections.jsexport const Tasks = new Mongo.Collection('tasks')export const Tags = new Mongo.Collection('tags')

发布

# publications.jsimport {Meteor} from 'meteor/meteor';import {Tasks} from './collections';Meteor.publish('tasks', function() {    return Tasks.find();});

提供数据操作

# methods.jsimport {Meteor} from 'meteor/meteor';import {Tasks, Tags} from './collections';Meteor.methods({    'tasks.complete': function(_id, complete){        Tasks.update({_id: _id}, {            $set: {                complete: complete,                updateAt: new Date()            }        })    },    'tasks.create': function(title){        check(title, String);        let _id = Tasks.insert({            title,            createAt: new Date()        })        return _id    },    'tasks.remove': function(_id){        check(_id, String);        Tasks.remove(_id);    }})

在客户端取得数据,和操作数据

# index.vue    import {Meteor} from 'meteor/meteor';    import {Tasks} from 'server/collections';    export default{        data(){            return{                tasks: [],                taskTitle: ""            }        },        methods: {            create(){                Meteor.call('tasks.create', this.taskTitle, function(err, _id){                    if(err){                        alert('出错了')                        console.error(err)                    } else {                        this.taskTitle = "";                    }                }.bind(this))            },            remove(task){                Meteor.call('tasks.remove', task._id)            }        },        route: {            activate: function(){                //订阅tasks数据                this.subscription = Meteor.subscribe('tasks');            },            data: function(transition){                Tracker.autorun(function () {                    //取得数据                    this.tasks = Tasks.find().fetch()                }.bind(this))            },            deactivate: function(){                //取消订阅tasks数据                this.subscription.shop()            }        }    }

使用docker部署meteor

使用daocloud平台(目前还是免费试用)前需要添加docker配置。

具体配置看例子的.docker目录和Dockerfile

逐步使用daocloud平台发布meteor应用

  1. 登录daocloud平台并创建一份代码构建,选择你的仓库(支持github、coding、私有gitlab等),其他默认,点击开始创建。

  2. 页面自动进入构建代码,等待一段时间后会显示构建成功。

  3. 点击镜像仓库并部署应用,逐步完成至见到环境变量设置,键入ROOT_URL=http://localhost:80、PORT=80、MONGO_URL=Mongo服务地址,然后部署

mongo访问地址,参考一下公式:

MONGO_URL = MONGODB_USERNAME:MONGODB_PASSWORD@MONGODB_PORT_27017_TCP_ADDR:27017/MONGODB_INSTANCE_NAME

具体指南

自定义部署meteor

服务器包含: nodejs、git、mongodb

$ curl https://install.meteor.com/ | sh # 安装meteor$ npm install -g demeteorizer # 安装demeteorizer$ npm install # 安装nodejs依赖的包$ meteor # 先保证应用是可以执行运行的$ demeteorizer # 打包(构建nodejs可用)代码$ cd .demeteorized/bundle/programs/server$ npm install$ cd ../../$ MONGO_URL=mongodb://localhost:27017/test PORT=80 ROOT_URL=http://localhost:80 node main.js

具体指南

值得注意的是用了webpack:webpack的meteor应用部署环境nodejs版本必须0.12.x以上,npm版本必须3.x以上

关键字:meteor, node, vue.js, webpack

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部