diff --git a/zh/api.md b/zh/api.md new file mode 100644 index 00000000..d84fc04f --- /dev/null +++ b/zh/api.md @@ -0,0 +1,224 @@ +# API参考文档 + +## `createRenderer([options])` + +通过[options](#renderer-options)参数(可选)创建一个 [`Renderer`](#class-renderer) 实例 。 + +```js +const { createRenderer } = require('vue-server-renderer') +const renderer = createRenderer({ ... }) +``` + +## `createBundleRenderer(bundle[, options])` + +通过服务端打出来的包和 [options](#renderer-options)参数(可选)创建一个[`BundleRenderer`](#class-bundlerenderer) 实例。 + +```js +const { createBundleRenderer } = require('vue-server-renderer') +const renderer = createBundleRenderer(serverBundle, { ... }) +``` + +其中的`serverBundle` 参数是下面三种情况之一: + +- 一个服务端打包生成的文件(`.js` 或者 `.json`)的绝对路径 。 必须以 `/` 作为文件路径处理。 +- 通过webpack + `vue-server-renderer/server-plugin`生成的对象。 +- JavaScript的字符串 (不推荐). + +查看[Introducing the Server Bundle](./bundle-renderer.md) 和 [Build Configuration](./build-config.md) 了解更多信息。 + +## `Renderer实例的方法:` + +- #### `renderer.renderToString(vm[, context], callback)` + +将Vue实例渲染为字符串。 上下文对象是可选的。 回调函数是一个典型的Node.js类型的回调函数,其中第一个参数是错误对象,第二个参数是渲染的字符串。 + +- #### `renderer.renderToStream(vm[, context])` + +将Vue实例渲染到Node.js流。 上下文对象是可选的。 更多信息请参阅[Streaming](./streaming.md) 传输。 + +## `BundleRenderer实例的方法` + +- #### `bundleRenderer.renderToString([context, ]callback)` + +将bundle渲染为字符串。 上下文对象是可选的。 回调函数是一个典型的Node.js类型的回调函数,其中第一个参数是错误对象,第二个参数是渲染的字符串。 + +- #### `bundleRenderer.renderToStream([context])` + + 将bundle渲染到Node.js流。 上下文对象是可选的。 更多信息请参阅 [Streaming](./streaming.md)传输。 + +## Renderer 参数 + +- #### `模板` + +为整个页面提供一个HTML模板。 该模板应包含一个注释`` ,作为渲染的应用内容的占位符。 + +模板还支持使用渲染上下文进行基本插值: + +- 使用双括号的插值表达式进行HTML转义; +- 使用三括号的插值表达式不进行HTML转义 + + 当在渲染上下文中找到某些数据时,模板会自动注入适当的内容: + +- `context.head`: (字符串) 应该插入到页面head标签内的标签。 +- `context.styles`: (字符串) 应该插入到页面head标签内的任何内联样式。注意这个属性可以被自动填充, 如果你在组件的CSS部分使用了 `vue-loader` + `vue-style-loader` 。 +- `context.state`: (对象) 初始Vuex存储状态,应在页面内联 `window.__INITIAL_STATE__`。 内联JSON使用[serialize-javascript](https://github.com/yahoo/serialize-javascript) 自动清理,以防止XSS。 + +另外,当`clientManifest` 被提供的时候,模板会自动注入以下内容: + +- 渲染所需的客户端JavaScript和CSS资源(使用异步块自动插入); +- Optimal `` resource hints for the rendered page. + + 您可以通过将`inject: false` 传递给渲染器来禁用所有自动注入。 + + 也可以看看: + +- [使用一个模版页面](./basic.md#using-a-page-template) +- [手动插入资源](./build-config.md#manual-asset-injection) + - #### `clientManifest` +- 2.3.0+ +- 只适用于`createBundleRenderer` + +提供一个通过 `vue-server-renderer/server-plugin`生成的客户端打包后的mainfest对象。客户端 mainfest 为渲染器提供了资源自动注入到HTML模板中的适当信息。 更多信息请看[生成clientManifest](./build-config.md#generating-clientmanifest). + +- +#### `inject` + + - 2.3.0+ + +控制使用 `template`模板时,是否使用自动注入功能。默认为 `true`. + +查看更多信息:[手动插入资源](./build-config.md#manual-asset-injection). + +- +#### `shouldPreload` + + - 2.3.0+ + + A function to control what files should have `` resource hints generated. + +默认情况下,只有JavaScript和CSS文件将被预加载,因为它们是你的应用程序引导所必需的。 + +对于其他类型的资源(如图像或字体),预加载太多可能会浪费带宽,甚至损害性能,因此预加载将依赖于场景。 您可以使用`shouldPreload` 选项精确控制预加载内容: + +```js + const renderer = createBundleRenderer(bundle, { + template, + clientManifest, + shouldPreload: (file, type) => { + // type is inferred based on the file extension. + // https://fetch.spec.whatwg.org/#concept-request-destination + if (type === 'script' || type === 'style') { + return true + } + if (type === 'font') { + // only preload woff2 fonts + return /\.woff2$/.test(file) + } + if (type === 'image') { + // only preload important images + return file === 'hero.jpg' + } + } + }) +``` + +- +#### `runInNewContext` + + - 2.3.0+ + - 仅适用于 `createBundleRenderer` + +默认情况下,对于每个渲染,包渲染器将创建一个新的V8上下文并重新执行整个包。 这有一些好处 :例如,我们不需要担心我们前面提到的“状态性单例”问题。 然而,这种模式有一些相当大的性能成本,因为重新执行bundle是昂贵的,特别是当应用程序变大时。 + +此参数对于向后兼容性默认为 `true`,但建议你每次使用`runInNewContext: false` 。 + +查看更多信息: [源码结构](./structure.md) + +- +#### `basedir` + + - 2.2.0+ + - 仅适用于 `createBundleRenderer` + +明确地声明服务端依赖包的基本目录来解析`node_modules`依赖关系。 只有将生成的包文件放置在与外部化NPM依赖关系所在的不同位置,或者您的 `vue-server-renderer`已连接到当前项目中时,才需要这样做。 + +- #### `cache` + +提供一种 [组件缓存](./caching.md#component-level-caching)的实现。缓存对象必须实现以下接口(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; + }; +``` + + 一个典型的应用是 [lru-cache](https://github.com/isaacs/node-lru-cache): + +```js + const LRU = require('lru-cache') + const renderer = createRenderer({ + cache: LRU({ + max: 10000 + }) + }) +``` + +需要注意的是缓存对象至少实现 `get`和 `set`方法。 另外, 如果第二个参数传递回调函数,`get` 和 `has` 方法还可以选择异步使用。这允许缓存使用异步API,例如 一个redis客户端: + +```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) + } + } + }) +``` + +- #### `directives` + +允许你为自定义指令提供服务器端实现: + +```js + const renderer = createRenderer({ + directives: { + example (vnode, directiveMeta) { + // transform vnode based on directive binding metadata + } + } + }) +``` + +这里有一个 [`v-show`的服务端实现实例](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js). + +## Webpack 插件 + +Webpack插件作为独立文件被提供,应直接要求: + +```js +const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') +const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') +``` + +默认文件生成: + +- `vue-ssr-server-bundle.json` 用于服务端插件; +- `vue-ssr-client-manifest.json` 用于客户端插件。 + +创建插件实例时可以自定义文件名: + +```js +const plugin = new VueSSRServerPlugin({ + filename: 'my-server-bundle.json' +}) +``` + +查看[构建配置](./build-config.md) 获取更多信息。