Vip-server-renderer NPM

vip-server-renderer

支持Atom的服务端渲染

安装

npm install vip-server-renderer

项目文件说明

index.js: 编译工具，输入.atom.html文件内容，输出编译后的js/php/css等信息
php/*: php运行时库
js/atom.js: js运行时库(目前版本完全基于Vue 2.3.3)

API

首先，需要引入vip-server-renderer

const compiler = require('vip-server-renderer');

compiler.compile(options)

输入一个.atom.html文件的内容，返回一个包含编译后各个信息的对象，对象形式如下：

{
    blocks: Object, // 各个block中的源代码
    compiled: {
        js: String, // 编译后的js代码
        css: String,    // 编译后的css代码
        php: String // 编译后的php代码
    },
    paths: {
        js: Object, // 编译后js中引用的各个组件的路径
        php: Object // 编译后php中引用的各个组件的路径
    },
    props: Array    // 当前vue组件定义props
}

options

options.content: .vue文件的内容，必选
options.mode: 编译后的js代码的形式，可选，取值包括amd/commonjs/umd/global，默认值amd
options.compileJSComponent: 处理js组件路径的插件函数，可选，插件函数可以获取到两个参数，分别是组件的原始路径path和组件的key。插件函数应返回相应的js代码（如require("path/to/component")）。
options.compilePHPComponent: 处理php组件路径的插件函数，可选，插件函数可以获取到两个参数，分别是组件的原始路径path和组件的key。插件函数返回相应的php代码（如"path/to/component"）。
options.compileStyle: 暴露预处理 css 代码的接口，可选。插件函数可以获取到两个参数，分别是代码内容 code 和所在的 style 标签的参数 attrs（目前只有 attrs.lang，表示用户设置的预处理语言），该函数只支持同步的方式，返回处理后的 css 代码。
options.strip {boolean} 是否strip掉空白字符(类似smarty的{strip}{/strip})，默认为false
options.versionIsolated {boolean} 是否使用php的版本隔离，默认是 true
options.silent {boolean} 是否静默 false
options.color {boolean} 日志是否带颜色 true
options.logger {Function|Object} 日志回调函数

compiler.getRender(template)

输入一个template字符串，返回一个用module.exports包裹，包含render函数和staticRenderFns的字符串

template

vue模板字符串

Vue服务端渲染原理

使用限制

由于不同语言的限制，我们在使用vue-php进行服务端渲染时也有一些限制：

.vue文件中，组件的data、props和components属性必须单独放到<config>中
template中模板使用js表达式时，不能调用函数，不能使用计算属性

一个.vue文件示例

<template>
    <div class="c-container">
        <div>{{a}}</div>
        <div><p>123</p></div>
        <div v-if="b">i am b</div>
        <ala />
    </div>
</template>

<style>
    .c-container {
        color: red;
    }
</style>

<script>
    var sth = require('something');

    module.exports = {
        created: function () {
            sth();
        }
    };
</script>

<config>
    {
        props: ['x', 'y'],
        data: {
            a: 123,
            b: true
        },
        components: {
            ala: 'path/to/ala'
        }
    };
</config>