Vue.js前后端通用组件开发心得-菜鸟篇

weakish 发布于2019-08-19 18:00 / 2922人阅读

摘要：最好能使用一套模板渲染前后端的数据，也就是模板和某些简单组件可以同构。开发组件因为需要让服务端也能使用，单文件的开发方式我目前是没有找到可以让读取的方式，所以就暂时放弃了。这种通用组件写法只适合比较简单的项目。

项目情况

我使用的是express做为服务器框架，只需要调用后台API接口获得数据，然后把数据渲染成html就可以了。最好能使用一套模板渲染前后端的数据，也就是模板和某些简单组件可以同构。
服务端渲染vue组件，使用vue-server这个插件。他的用法和vue差不多。这样做的目的是首屏服务端渲染，提升页面展示速度。

开发组件

因为需要让服务端也能使用，单.vue文件的开发方式我目前是没有找到可以让node读取的方式，所以就暂时放弃了。
还有下面这种写死组件名字的方式也不太合适

Vue.component("my-component", { /* ... */ })  //这样写需要引入Vue,但是前后端的Vue不是一个东西

所以我选择了只输出一个个简单组件对象的方式，如下 modal.js

为什么template模板要直接写在里面呢？

答：因为会有2种引入方式，前端是可以预编译好的没有问题，但是后端调用 import "XXX.html" 这句话就可能执行不了。

输出组件

#index.js 输出组件的文件
import modal from "./component/modal/modal"

exports.modal = modal

前端使用组件

import Vue from "vue"
import {
    picker,
    modal,
    toast,
    alert,
    preloader,
    indicator,
    actions,
    pullToRefresh,
    infiniteScroll
} from "../src/index" 
//使用前端的Vue定义组件和指令的名称
Vue.component("picker",picker);
Vue.component("modal",modal);
Vue.component("toast",toast);
Vue.component("alert",alert);
Vue.component("preloader",preloader);
Vue.component("indicator",indicator);
Vue.component("actions",actions)

Vue.directive("pull-to-refresh",pullToRefresh)
Vue.directive("infinite-scroll",infiniteScroll)

这样前端就可以正常使用这个组件了

后端使用组件

import {
    picker,
    modal,
    toast,
    alert,
    preloader,
    indicator,
    actions,
    pullToRefresh,
    infiniteScroll
} from "../src/index" 

let vueServer = require("vue-server") //服务端Vue
let Vue = new vueServer.renderer();
//页面模板
let tpl = fs.readFileSync(config.PATH_WEBAPP + "/states/index/template.html", "utf-8");

//vue实例
vm = new Vue({
    replace: false,
    template: tpl,
    components : {
        picker : picker,
        modal : modal,
        toast : toast,
        alert : alert
    },
    data: {
        
    }
});
//渲染好html的事件
vm.$on("vueServer.htmlReady", function (html) {
    res.render("layout", {server_html:html}); //这个html就是vue服务端渲染好的，然后可以通过ejs或者其他模板引擎输出到layout中。
});

ok 这种通用组件写法只适合比较简单的项目。比较适合写一次绑定生成页面元素的组件，比如列表，布局这种组件。

GPU云服务器云服务器前后端分离开发前后端前后端分离 webrtc前后端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79081.html

Vue-book 2.0 一个移动端简单的全栈 web APP

摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】说明（菜鸟请进，大神绕道 ~）前端...

wh469012917 2019-06-27 16:37 评论0 收藏0
Vue-book 2.0 一个移动端简单的全栈 web APP

摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】说明（菜鸟请进，大神绕道 ~）前端...

NotFound 2019-08-20 16:53 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0