From 4e1060fd3d1133efe58d63dfdc76b6a284ae30c5 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Thu, 14 Sep 2017 15:43:47 +0800 Subject: [PATCH 1/4] Synced recent updates from en. --- docs/zh-cn/SUMMARY.md | 11 ++++ docs/zh-cn/configurations/custom-blocks.md | 68 +++++++++++++++++++++- docs/zh-cn/features/postcss.md | 2 +- docs/zh-cn/features/scoped-css.md | 16 +++++ docs/zh-cn/options.md | 9 +++ 5 files changed, 104 insertions(+), 2 deletions(-) diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md index 6aa5eb440..12fa66686 100644 --- a/docs/zh-cn/SUMMARY.md +++ b/docs/zh-cn/SUMMARY.md @@ -19,3 +19,14 @@ - [测试](workflow/testing.md) - [使用 Mock 测试](workflow/testing-with-mocks.md) - [选项参考](options.md) + - [loaders](options.md#loaders) + - [preLoaders](options.md#preloaders) + - [postLoaders](options.md#postloaders) + - [postcss](options.md#postcss) + - [cssSourceMap](options.md#csssourcemap) + - [esModule](options.md#esmodule) + - [preserveWhitespace](options.md#preservewhitespace) + - [transformToRequire](options.md#transformtorequire) + - [buble](options.md#buble) + - [extractCSS](options.md#extractcss) + - [optimizeSSR](options.md#optimizessr) diff --git a/docs/zh-cn/configurations/custom-blocks.md b/docs/zh-cn/configurations/custom-blocks.md index 8b1d6f0de..b8039cb34 100644 --- a/docs/zh-cn/configurations/custom-blocks.md +++ b/docs/zh-cn/configurations/custom-blocks.md @@ -7,7 +7,7 @@ 如果找到一个自定义块的 matching loader，该自定义块将被处理; 否则自定义块将被忽略。 另外，如果找到的 loader 返回一个函数，该函数将以 `* .vue` 文件的组件作为参数来调用。 -## 例子 +## 单个文档文件的例子 这是提取自定义块 `` 的内容到单个 docs 文件中的例子： @@ -66,3 +66,69 @@ module.exports = { ] } ``` + +## 运行时可用的文档 + +Here's an example of injecting the `` custom blocks into the component so that it's available during runtime. + +#### docs-loader.js + +In order for the custom block content to be injected, we'll need a custom loader: + +``` js +module.exports = function (source, map) { + this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' + + JSON.stringify(source) + + '}', map) +} +``` + +#### webpack.config.js + +Now we'll configure webpack to use our custom loader for `` custom blocks. + +``` js +const docsLoader = require.resolve('./custom-loaders/docs-loader.js') + +module.exports = { + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue', + options: { + loaders: { + 'docs': docsLoader + } + } + } + ] + } +} +``` + +#### component.vue + +We are now able to access the `` block's content of imported components during runtime. + +``` html + + + +``` diff --git a/docs/zh-cn/features/postcss.md b/docs/zh-cn/features/postcss.md index 175353824..13bfdb563 100644 --- a/docs/zh-cn/features/postcss.md +++ b/docs/zh-cn/features/postcss.md @@ -56,7 +56,7 @@ module.exports = { - 返回插件数组的函数； -- 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 `parser/stringifiers`时，这很有用： +- 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 parser/stringifiers 时，这很有用： ``` js postcss: { diff --git a/docs/zh-cn/features/scoped-css.md b/docs/zh-cn/features/scoped-css.md index 237e0321e..349985b84 100644 --- a/docs/zh-cn/features/scoped-css.md +++ b/docs/zh-cn/features/scoped-css.md @@ -49,3 +49,19 @@ 4. **CSS 作用域不能代替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，`p { color: red }` 在作用域中会慢很多倍（即当与属性选择器组合时）。如果你使用 classes 或者 ids 代替，比如 `.example { color: red }`，这样几乎没有性能影响。[Here's a playground](http://stevesouders.com/efws/css-selectors/csscreate.php) 你可以测试它们的不同。 5. **在递归组件中小心使用后代选择器!** 对于带有选择器 `.a .b` 的CSS 规则，如果元素 `.a` 包含递归子组件，所有的子组件中的 `.b` 会被匹配。 + +6. If you need nested selectors in `scoped` styles, you will have to use `>>>` operator for CSS and `/deep/` for `scss`: + + ``` html + + + + ``` diff --git a/docs/zh-cn/options.md b/docs/zh-cn/options.md index 6b79401da..8d2ccd828 100644 --- a/docs/zh-cn/options.md +++ b/docs/zh-cn/options.md @@ -247,3 +247,12 @@ module.exports = { ] } ``` + +### optimizeSSR + +> New in 12.1.1 + +- type: `boolean` +- default: `true` when the webpack config has `target: 'node'` and `vue-template-compiler` is at version 2.4.0 or above. + +Enable Vue 2.4 SSR compilation optimization that compiles part of the vdom trees returned by render functions into plain strings, which improves SSR performance. In some cases you might want to explicitly turn it off because the resulting render functions can only be used for SSR and cannot be used for client-side rendering or testing. From ad23d784ef1e3981d79a30999372a77586b84466 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Mon, 25 Sep 2017 14:36:40 +0800 Subject: [PATCH 2/4] [zh-cn] finished translation of recent updates --- docs/zh-cn/configurations/custom-blocks.md | 8 ++++---- docs/zh-cn/features/scoped-css.md | 2 +- docs/zh-cn/options.md | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/zh-cn/configurations/custom-blocks.md b/docs/zh-cn/configurations/custom-blocks.md index b8039cb34..87c68c8db 100644 --- a/docs/zh-cn/configurations/custom-blocks.md +++ b/docs/zh-cn/configurations/custom-blocks.md @@ -69,11 +69,11 @@ module.exports = { ## 运行时可用的文档 -Here's an example of injecting the `` custom blocks into the component so that it's available during runtime. +这里有一个向组件注入 `` 自定义块使其在运行时可用的例子。 #### docs-loader.js -In order for the custom block content to be injected, we'll need a custom loader: +为了使得自定义块内容被注入，我们需要一个自定义的 loader： ``` js module.exports = function (source, map) { @@ -85,7 +85,7 @@ module.exports = function (source, map) { #### webpack.config.js -Now we'll configure webpack to use our custom loader for `` custom blocks. +现在我们将为 `` 自定义块配置我们的 webpack 自定义 loader。 ``` js const docsLoader = require.resolve('./custom-loaders/docs-loader.js') @@ -109,7 +109,7 @@ module.exports = { #### component.vue -We are now able to access the `` block's content of imported components during runtime. +现在我们可以在运行时访问已导入组件的 `` 块内容了。 ``` html