# vue-server-renderer
> This package is auto-generated. For pull requests please see [src/entries/web-server-renderer.js](https://github.com/vuejs/vue/blob/dev/src/entries/web-server-renderer.js).
This package offers Node.js server-side rendering for Vue 2.0.
- [Installation](#installation)
- [API](#api)
- [Renderer Options](#renderer-options)
- [Why Use `bundleRenderer`?](#why-use-bundlerenderer)
- [Creating the Server Bundle](#creating-the-server-bundle)
- [Component Caching](#component-caching)
- [Client Side Hydration](#client-side-hydration)
## Installation
``` bash
npm install vue-server-renderer
```
## API
### createRenderer([[rendererOptions](#renderer-options)])
Create a `renderer` instance.
``` js
const renderer = require('vue-server-renderer').createRenderer()
```
---
### renderer.renderToString(vm, cb)
Render a Vue instance to string. The callback is a standard Node.js callback that receives the error as the first argument:
``` js
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
const vm = new Vue({
render (h) {
return h('div', 'hello')
}
})
renderer.renderToString(vm, (err, html) => {
console.log(html) // -> <div server-rendered="true">hello</div>
})
```
---
### renderer.renderToStream(vm)
Render a Vue instance in streaming mode. Returns a Node.js readable stream.
``` js
// example usage with express
app.get('/', (req, res) => {
const vm = new App({ url: req.url })
const stream = renderer.renderToStream(vm)
res.write(`<!DOCTYPE html><html><head><title>...</title></head><body>`)
stream.on('data', chunk => {
res.write(chunk)
})
stream.on('end', () => {
res.end('</body></html>')
})
})
```
---
### createBundleRenderer(bundle, [[rendererOptions](#renderer-options)])
Creates a `bundleRenderer` instance using pre-compiled application bundle. The `bundle` argument can be one of the following:
- An absolute path to generated bundle file (`.js` or `.json`). Must start with `/` to be treated as a file path.
- A bundle object generated by `vue-ssr-webpack-plugin`.
- A string of JavaScript code.
See [Creating the Server Bundle](#creating-the-server-bundle) for more details.
For each render call, the code will be re-run in a new context using Node.js' `vm` module. This ensures your application state is discrete between requests, and you don't need to worry about structuring your application in a limiting pattern just for the sake of SSR.
``` js
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
// absolute filepath
let renderer = createBundleRenderer('/path/to/bundle.json')
// bundle object
let renderer = createBundleRenderer({ ... })
// code (not recommended for lack of source map support)
let renderer = createBundleRenderer(bundledCode)
```
---
### bundleRenderer.renderToString([context], cb)
Render the bundled app to a string. Same callback interface with `renderer.renderToString`. The optional context object will be passed to the bundle's exported function.
``` js
bundleRenderer.renderToString({ url: '/' }, (err, html) => {
// ...
})
```
---
### bundleRenderer.renderToStream([context])
Render the bundled app to a stream. Same stream interface with `renderer.renderToStream`. The optional context object will be passed to the bundle's exported function.
``` js
bundleRenderer
.renderToStream({ url: '/' })
.pipe(writableStream)
```
## Renderer Options
### cache
Provide a [component cache](#component-caching) implementation. The cache object must implement the following interface (using Flow notations):
``` js
type RenderCache = {
get: (key: string, cb?: Function) => string | void;
set: (key: string, val: string) => void;
has?: (key: string, cb?: Function) => boolean | void;
};
```
A typical usage is passing in an [lru-cache](https://github.com/isaacs/node-lru-cache):
``` js
const LRU = require('lru-cache')
const renderer = createRenderer({
cache: LRU({
max: 10000
})
})
```
Note that the cache object should at least implement `get` and `set`. In addition, `get` and `has` can be optionally async if they accept a second argument as callback. This allows the cache to make use of async APIs, e.g. a redis client:
``` js
const renderer = createRenderer({
cache: {
get: (key, cb) => {
redisClient.get(key, (err, res) => {
// handle error if any
cb(res)
})
},
set: (key, val) => {
redisClient.set(key, val)
}
}
})
```
---
### template
> New in 2.2.0
Provide a template for the entire page's HTML. The template should contain a comment `<!--vue-ssr-outlet-->` which serves as the placeholder for rendered app content.
In addition, when both a template and a render context is provided (e.g. when using the `bundleRenderer`), the renderer will also automatically inject the following properties found on the render context:
- `context.head`: (string) any head markup that should be injected into the head of the page.
- `context.styles`: (string) any inline CSS that should be injected into the head of the page. Note that `vue-loader` 10.2.0+ (which uses `vue-style-loader` 2.0) will automatically populate this property with styles used in rendered components.
- `context.state`: (Object) initial Vuex store state that should be inlined in the page as `window.__INITIAL_STATE__`. The inlined JSON is automatically sanitized with [serialize-javascript](https://github.com/yahoo/serialize-javascript).
**Example:**
``` js
const renderer = createRenderer({
template:
'<!DOCTYPE html>' +
'<html lang="en">' +
'<head>' +
'<meta charset="utf-8">' +
// context.head will be injected here
// context.styles will be injected here
'</head>' +
'<body>' +
'<!--vue-ssr-outlet-->' + // <- app content rendered here
// context.state will be injected here
'</body>' +
'</html>'
})
```
---
### basedir
> New in 2.2.0
Explicitly declare the base directory for the server bundle to resolve node_modules from. This is only needed if your generated bundle file is placed in a different location from where the externalized NPM dependencies are installed.
Note that the `basedir` is automatically inferred if you use `vue-ssr-webpack-plugin` or provide an absolute path to `createBundleRenderer` as the first argument, so in most cases you don't need to provide this option. However, this option does allow you to explicitly overwrite the inferred value.
---
### directives
Allows you to provide server-side implementations for your custom directives:
``` js
const renderer = createRenderer({
directives: {
example (vnode, directiveMeta) {
// transform vnode based on directive binding metadata
}
}
})
```
As an example, check out [`v-show`'s server-side implementation](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js).
## Why Use `bundleRenderer`?
When we bundle our front-end code with a module bundler such as webpack, it can introduce some complexity when we want to reuse the same code on the server. For example, if we use `vue-loader`, TypeScript or JSX, the code cannot run natively in Node. Our code may also rely on some webpack-specific features such as file handling with `file-loader` or style injection with `style-loader`, both of which can be problematic when running inside a native Node module environment.
The most straightforward solution to this is to leverage webpack's `target: 'node'` feature and simply use webpack to bundle our code on both the client AND the server.
Having a compiled server bundle also provides another advantage in terms of code organization. In a typical Node.js app, the server is a long-running process. If we run our application modules directly, the instantiated modules will be shared across every request. This imposes some inconvenient restrictions to the application structure: we will have to avoid any use of globa
三套企业级小程序商城源码 （8158个子文件） 
controller.ashx 3KB .babelrc 160B king-spec.js.bak 22KB .buildinfo 230B php_xxtea.c 6KB xxtea.c 2KB fckeditor.cfc 9KB spellchecker.cfm 5KB CHANGES 6KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB config 1KB Web.config 453B COPYING 1KB CREDITS 51B UploadHandler.cs 5KB CrawlerHandler.cs 3KB ListFileHandler.cs 3KB PathFormater.cs 2KB Handler.cs 1KB Config.cs 1KB NotSupportedHandler.cs 455B ConfigHandler.cs 332B H-ui.css 203KB H-ui.min.css 149KB bootstrap.css 143KB bootstrap.css 143KB bootstrap.min.css 118KB bootstrap.min.css 118KB AdminLTE.css 108KB AdminLTE.css 108KB AdminLTE.min.css 88KB AdminLTE.min.css 88KB AdminLTE-without-plugins.css 88KB AdminLTE-without-plugins.css 88KB theme.css 87KB main.css 80KB AdminLTE-without-plugins.min.css 72KB AdminLTE-without-plugins.min.css 72KB samples.css 66KB samples.css 66KB _all-skins.css 46KB _all-skins.css 46KB ueditor.css 43KB _all-skins.min.css 40KB _all-skins.min.css 40KB main.css 37KB ueditor.min.css 34KB datepicker3.css 33KB datepicker3.css 33KB editor_ie7.css 33KB editor_ie7.css 33KB editor_iequirks.css 31KB editor_iequirks.css 31KB editor_ie8.css 31KB editor_ie8.css 31KB editor_ie.css 31KB editor_ie.css 31KB editor_gecko.css 30KB editor_gecko.css 30KB editor.css 30KB editor.css 30KB style.css 29KB bootstrap-theme.css 26KB bootstrap-theme.css 26KB bootstrap-theme.min.css 23KB bootstrap-theme.min.css 23KB fullcalendar.css 22KB fullcalendar.css 22KB _all.css 21KB _all.css 21KB video-js.css 21KB default.css 20KB image.css 18KB select2.css 17KB select2.css 17KB iconfont.css 16KB AdminLTE-bootstrap-social.css 15KB AdminLTE-bootstrap-social.css 15KB _all.css 15KB _all.css 15KB jquery.dataTables.css 15KB jquery.dataTables.css 15KB select2.min.css 15KB select2.min.css 15KB共 8158 条
- 1
- 2
- 3
- 4
- 5
- 6
- 82
资源评论
送涂图
- 粉丝: 97
- 资源: 163
最新资源
- 数据库课程设计-基于的个性化购物平台的建表语句.sql
- 数据库课程设计-基于的图书智能一体化管理系统的建表语句.sql
- Java 代码覆盖率库.zip
- Java 代码和算法的存储库 也为该存储库加注星标 .zip
- 免安装Windows10/Windows11系统截图工具，无需安装第三方截图工具 双击直接使用截图即可 是一款免费可靠的截图小工具哦~
- Libero Soc v11.9的安装以及证书的获取（2021新版）.zip
- BouncyCastle.Cryptography.dll
- 5.1 孤立奇点(JD).ppt
- 基于51单片机的智能交通灯控制系统的设计与实现源码+报告（高分项目）
- 什么是 SQL 注入.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
