2.0.6 • Published 7 years ago

vip-server-renderer v2.0.6

Weekly downloads
3
License
MIT
Repository
gitlab
Last release
7 years ago

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服务端渲染原理

img

使用限制

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

  • .vue文件中,组件的datapropscomponents属性必须单独放到<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>

License

MIT

2.0.7-beta.1

7 years ago

2.0.6

7 years ago

2.0.6-beta.3

7 years ago

2.0.6-beta.2

7 years ago

2.0.6-beta.1

7 years ago

2.0.5-beta.1

7 years ago

2.0.5

7 years ago

2.0.4

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

2.0.0-beta.6

7 years ago

2.0.0-beta.5

7 years ago

2.0.0-beta.4

7 years ago

2.0.0-beta.3

7 years ago

1.1.3-alpha.2

7 years ago

1.1.3-alpha.1

7 years ago

1.1.2

7 years ago

1.1.1

7 years ago

1.1.1-alpha.2

7 years ago

1.1.1-alpha.1

7 years ago

2.0.0-beta.2

7 years ago

2.0.0-beta.1

7 years ago

2.0.0-beta.0

7 years ago

1.1.0

7 years ago

1.1.0-beta.13

7 years ago

1.1.0-beta.12

7 years ago

1.1.0-beta.11

7 years ago

1.1.0-beta.10

7 years ago

1.1.0-beta.9

7 years ago

1.1.0-beta.8

7 years ago

1.1.0-beta.7

7 years ago

1.0.60

7 years ago

1.0.59

7 years ago

1.1.0-beta.6

7 years ago

1.1.0-beta.5

7 years ago

1.1.0-beta.4

7 years ago

1.1.0-beta.3

7 years ago

1.1.0-beta.2

7 years ago

1.1.0-beta.1

7 years ago

1.0.58

7 years ago

1.0.57

7 years ago

1.0.56

7 years ago

1.0.55

7 years ago

1.0.54

7 years ago

1.0.53

7 years ago

1.0.52

7 years ago

1.0.51

7 years ago

1.0.50

7 years ago

1.0.50-beta.1

7 years ago

1.0.50-beta.0

7 years ago

1.0.49

8 years ago

1.0.48

8 years ago

1.0.47

8 years ago

1.0.46

8 years ago

1.0.45

8 years ago

1.0.44

8 years ago

1.0.43

8 years ago

1.0.42

8 years ago

1.0.40

8 years ago

1.0.39

8 years ago

1.0.38

8 years ago

1.0.37

8 years ago

1.0.36

8 years ago

1.0.35

8 years ago

1.0.34

8 years ago

1.0.33

8 years ago

1.0.32

8 years ago

1.0.31

8 years ago

1.0.30

8 years ago

1.0.29

8 years ago

1.0.28

8 years ago

1.0.27

8 years ago

1.0.26

8 years ago

1.0.25

8 years ago

1.0.24

8 years ago

1.0.22

8 years ago

1.0.21

8 years ago

1.0.20

8 years ago

1.0.18

8 years ago

1.0.17

8 years ago

1.0.16

8 years ago

1.0.15

8 years ago

1.0.14

8 years ago

1.0.13

8 years ago

1.0.12

8 years ago

1.0.11

8 years ago

1.0.10

8 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

0.9.9

8 years ago

1.0.0

8 years ago

2.2.0

8 years ago

2.2.6

8 years ago