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

WBOY
发布: 2016-06-24 11:21:57
原创
1513 人浏览过

项目情况

我使用的是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') //服务端Vuelet 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 这种通用组件写法只适合比较简单的项目。比较适合写一次绑定生成页面元素的组件,比如列表,布局这种组件。

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!