Skip to content

Commit 8e34bad

Browse files
huguangjuyyx990803
authored andcommitted
update Chinese translation (#794)
* update Chinese translation * Do not consider private properties to be named exports (fix: #759) (#765) * support deps registered by postcss plugins * make keyframes scoped (close #731) * only infer scss/sass loader when no explicit loaders have been specified (fix #790) * 12.0.1 * Revert "make keyframes scoped (close #731)" This reverts commit 35229b0. * 12.0.2
1 parent 2155a2e commit 8e34bad

17 files changed

+190
-100
lines changed

docs/zh-cn/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@
2727

2828
一个基本的例子,想像我们有一些 CommonJS 模块,它不能直接在浏览器中运行,所以我们需要打包成一个文件,这样就可以通过`<script>` 标签加载。Webpack 可以遵循 `require()` 调用的依赖关系,为我们完成这些工作。
2929

30-
但是 Webpack 可以做的不止这些。使用 "loaders",我们可以配置 Webpack 以任何方式去转换所有类型的文件。一些例子包括
30+
但是 Webpack 可以做的不止这些。使用 "loaders",我们可以配置 Webpack 以任何方式去转换所有类型的文件。包括以下例子
3131

32-
- 转换 ES2015,CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块;
32+
- 转换 ES2015CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块;
3333
- 可以选择在编译之前检验你的源代码;
3434
- 将 Jade 模版转换为纯 HTML 并且嵌入 Javascript 字符串中;
35-
- 将 SASS 文件转换为纯 CSS,then convert it into a JavaScript snippet that insert the resulting CSS as a `<style>` tag;
35+
- 将 SASS 文件转换为纯 CSS,然后将其转换成 JavaScript 片段,将生成的 CSS 作为 `<style>` 标签插入页面;
3636
- 处理 HTML 或者 CSS 中引用的图片,移动到配置的路径中,并且使用 md5 hash 重命名。
3737

38-
当你理解 Webpack 原理后会感觉它是如此强大,它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦,但是使用本指南, Vue.js 和 `vue-loader`使用时的常见问题,应该可以帮助你找到解决方案
38+
当你理解 Webpack 原理后会感觉它是如此强大,它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦,但是使用本指南,应该可以帮助你找到 Vue.js 和 `vue-loader` 使用时的最常见问题的解决方案

docs/zh-cn/SUMMARY.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
- [热重载](features/hot-reload.md)
1010
- 配置
1111
- [预处理器](configurations/pre-processors.md)
12-
- [处理资源路径](configurations/asset-url.md)
12+
- [资源路径处理](configurations/asset-url.md)
1313
- [进阶配置](configurations/advanced.md)
1414
- [提取 CSS 文件](configurations/extract-css.md)
1515
- [自定义块](configurations/custom-blocks.md)
1616
- 工作流程
1717
- [生产环境构建](workflow/production.md)
1818
- [代码检验](workflow/linting.md)
1919
- [测试](workflow/testing.md)
20-
- [使用 Mocks 测试](workflow/testing-with-mocks.md)
20+
- [使用 Mock 测试](workflow/testing-with-mocks.md)
2121
- [选项参考](options.md)

docs/zh-cn/configurations/advanced.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
# Loader 进阶配置
22

3-
有些时候你想要这样
3+
你有时可能想实现
44

55
1. 对语言应用自定义 loader string,而不是让 `vue-loader` 去推断;
66

7-
2. 覆盖默认语言的内置配置
7+
2. 覆盖默认语言的内置 loader 配置
88

9-
3. 默认语言预处理或者后处理配置
9+
3. 使用自定义 loader 预处理或后处理特定语言块
1010

11-
为了实现这些,详细说明 `vue-loader``loaders` 选项:
11+
为此,请指定 `vue-loader``loaders` 选项:
1212

1313
> 注意 `preLoaders``postLoaders` 只在版本 >=10.3.0 支持
1414
@@ -18,7 +18,7 @@
1818
module.exports = {
1919
// other options...
2020
module: {
21-
// module.rules is the same as module.loaders in 1.x
21+
// module.rules 与 1.x中的 module.loaders 相同
2222
rules: [
2323
{
2424
test: /\.vue$/,
@@ -45,10 +45,8 @@ module.exports = {
4545
postLoaders: {
4646
html: 'babel-loader'
4747
}
48-
49-
         // `excludedPreLoaders` 的内容是正则表达式
50-
         // 你可以用来从 Loader chain 上剔除那些你不需要 vue-loader 处理的 preloader
51-
         // 最常用的就是各种 lint
48+
49+
         // `excludedPreLoaders` 应是正则表达式
5250
         excludedPreLoaders: /(eslint-loader)/
5351
}
5452
}

docs/zh-cn/configurations/asset-url.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# 处理资源路径
1+
# 资源路径处理
22

3-
默认情况下,`vue-loader` 使用 [css-loader](https://github.com/webpack/css-loader) 和 Vue 模版编译器自动处理你的样式和模版文件。在处理过程中,所有的资源路径例如 `<img src="...">`, `background: url(...)``@import` **会作为模块依赖**
3+
默认情况下,`vue-loader` 使用 [css-loader](https://github.com/webpack/css-loader) 和 Vue 模版编译器自动处理你的样式和模版文件。在编译过程中,所有的资源路径例如 `<img src="...">`, `background: url(...)``@import` **会作为模块依赖**
44

55
例如,`url(./image.png)` 会被转换为 `require('./image.png')`,
66

@@ -14,10 +14,10 @@
1414
createElement('img', { attrs: { src: require('../image.png') }})
1515
```
1616

17-
因为 `.png` 不是一个 JavaScript 文件,你需要配置 Webpack 使用 [file-loader](https://github.com/webpack/file-loader) 或者 [url-loader](https://github.com/webpack/url-loader) 去处理它们。脚手器工具 `vue-cli` 已经为你配置好了
17+
因为 `.png` 不是一个 JavaScript 文件,你需要配置 Webpack 使用 [file-loader](https://github.com/webpack/file-loader) 或者 [url-loader](https://github.com/webpack/url-loader) 去处理它们。`vue-cli` 脚手器工具已经为你配置好了
1818

1919
使用它们的好处:
2020

21-
1. `file-loader` 允许你指定资源文件的位置,允许使用 hashes 命名以获得长时间的缓存。此外,这意味着 **你可以就近管理你的图片文件,可以使用相对路径而不用担心布署**。使用正确的配置,Webpack 将会在输出中自动重写为正常的文件路径
21+
1. `file-loader` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 **你可以就近管理你的图片文件,可以使用相对路径而不用担心布署时URL问题**。使用正确的配置,Webpack 将会在打包输出中自动重写文件路径为正确的URL
2222

23-
2. `url-loader` 允许你设置转换为内联 base64 的文件最小值,这会减少小文件的 HTTP 请求。如果文件大于设置值,会自动的交给 `file-loader` 处理。
23+
2. `url-loader` 允许你有条件将文件转换为内联的 base-64 URL(当文件小于给定的阈值),这会减少小文件的 HTTP 请求。如果文件大于该阈值,会自动的交给 `file-loader` 处理。

docs/zh-cn/configurations/custom-blocks.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22

33
> 在大于 10.2.0 中支持
44
5-
`.vue` 文件中,你可以自定义语言块。自定义块将会被 `vue-loader` 选项 `loaders` 中指定的 loaders 处理,然后被组件模块依赖。配置类似 [Loader 进阶配置](../configurations/advanced.md),除了匹配使用的是标签名称,而不是 `lang` 属性。
5+
`.vue` 文件中,你可以自定义语言块。自定义块的内容将由 `vue-loader` 的 options 中的 `loader` 对象中指定的 loader 处理,然后被组件模块依赖。类似 [Loader 进阶配置](../configurations/advanced.md)中的配置,但使用的是标签名匹配,而不是 `lang` 属性。
66

7-
如果 loader 匹配到自定义块,它会被处理;其它情况会被忽略。
7+
如果找到一个自定义块的 matching loader,该自定义块将被处理; 否则自定义块将被忽略。
8+
另外,如果找到的 loader 返回一个函数,该函数将以 `* .vue` 文件的组件作为参数来调用。
89

910
## 例子
1011

11-
这个例子是提取自定义块 `<docs>` 的内容到单个 docs 文件中
12+
这是提取自定义块 `<docs>` 的内容到单个 docs 文件中的例子
1213

1314
#### component.vue
1415

docs/zh-cn/configurations/extract-css.md

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,47 @@
11
# 提取 CSS 到单个文件
22

3-
提取所有 Vue 组件中的 CSS 到单个文件的例子:
4-
5-
### Webpack 2.x
6-
73
``` bash
84
npm install extract-text-webpack-plugin --save-dev
95
```
106

7+
## 简单的方法
8+
9+
> requires vue-loader@^12.0.0 and webpack@^2.0.0
10+
11+
``` js
12+
// webpack.config.js
13+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
14+
15+
module.exports = {
16+
// other options...
17+
module: {
18+
rules: [
19+
{
20+
test: /\.vue$/,
21+
loader: 'vue-loader',
22+
options: {
23+
extractCSS: true
24+
}
25+
}
26+
]
27+
},
28+
plugins: [
29+
new ExtractTextPlugin("style.css")
30+
]
31+
}
32+
```
33+
34+
上述内容将自动处理 `*.vue` 文件内的 `<style>` 提取,并与大多数预处理器一样开箱即用。
35+
36+
注意这只是提取 `*.vue` 文件 - 但在 JavaScript 中导入的 CSS 仍然需要单独配置。
37+
38+
## 手动配置
39+
40+
将所有 Vue 组件中的所有已处理的 CSS 提取为单个 CSS 文件配置示例:
41+
42+
### Webpack 2.x
43+
44+
1145
``` js
1246
// webpack.config.js
1347
var ExtractTextPlugin = require("extract-text-webpack-plugin")
@@ -23,7 +57,7 @@ module.exports = {
2357
loaders: {
2458
css: ExtractTextPlugin.extract({
2559
use: 'css-loader',
26-
fallback: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
60+
fallback: 'vue-style-loader' // <- 这是vue-loader的依赖,所以如果使用npm3,则不需要显式安装
2761
})
2862
}
2963
}
@@ -59,7 +93,7 @@ module.exports = {
5993
vue: {
6094
loaders: {
6195
css: ExtractTextPlugin.extract("css"),
62-
// you can also include <style lang="less"> or other langauges
96+
// 你还可以引入 <style lang="less"> 或其它语言
6397
less: ExtractTextPlugin.extract("css!less")
6498
}
6599
},

docs/zh-cn/features/css-modules.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</style>
2020
```
2121

22-
这将为 `css-loader` 打开 CSS 模块模式,生成的 CSS 对象将为组件注入一个名叫 `$style` 的计算属性,你可以在你的模块中使用动态绑定
22+
这将为 `css-loader` 打开 CSS 模块模式,生成的 CSS 对象将为组件注入一个名叫 `$style` 的计算属性,你可以在你的模块中使用动态 class 绑定
2323

2424
``` html
2525
<template>
@@ -29,7 +29,7 @@
2929
</template>
3030
```
3131

32-
由于它是一个计算属性,它也与 `class` 的 object/array 语法一起使用
32+
由于它是一个计算属性,它也适用于 `:class` 的 object/array 语法
3333

3434
``` html
3535
<template>

docs/zh-cn/features/es2015.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# ES2015
22

3-
当项目中配置了 `babel-loader` 或者 `buble-loader``vue-loader` 会使用他们处理所有 `.vue` 文件中的 `<script>` 部分,允许我们在 Vue 组件中使用 ES2015,如果你还没有使用 ES2015,你应该使用它,下面是一些好的学习资源
3+
当项目中配置了 `babel-loader` 或者 `buble-loader``vue-loader` 会使用他们处理所有 `.vue` 文件中的 `<script>` 部分,允许我们在 Vue 组件中使用 ES2015,如果你还没有使用 ES2015,你应该使用它,这有一些不错的学习资源
44

55
- [Babel - Learn ES2015](https://babeljs.io/docs/learn-es2015/)
66
- [ES6 Features](https://github.com/lukehoban/es6features)
@@ -54,12 +54,12 @@ export default {
5454
</my-component>
5555
```
5656

57-
你还可以使用[`buble` 选项]../ options.mdbuble自定义模板中支持的功能。
57+
你还可以使用 [`buble` 选项](../options.md#buble) 自定义模板中支持的功能。
5858

5959
### 转换普通 `.js` 文件
6060

61-
由于 `vue-loader` 只处理 `.vue` 文件,你需要告诉 Webpack 如何使用 `babel-loader` 或者 `buble-loader` 处理普通 `.js` 文件,在 Webpack 中配置 `babel-loader`或者 `buble-loader`。脚手架工具 `vue-cli` 已经为你做了这些。
61+
由于 `vue-loader` 只处理 `.vue` 文件,你需要告诉 Webpack 如何使用 `babel-loader` 或者 `buble-loader` 处理普通 `.js` 文件,在 Webpack 中配置 `babel-loader` 或者 `buble-loader`。脚手架工具 `vue-cli` 已经为你做了这些。
6262

6363
### 使用 `.babelrc` 配置 Babel
6464

65-
`babel-loader` 遵守 [`.babelrc`](https://babeljs.io/docs/usage/babelrc/)因此这是推荐配置 Babel presets 和插件的方法
65+
`babel-loader` 遵守 [`.babelrc`](https://babeljs.io/docs/usage/babelrc/)因此这是配置 Babel presets 和插件推荐的方法

docs/zh-cn/features/hot-reload.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# 热重载
22

3-
"热重载"不是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改 `.vue` 文件时,所有该组件的实例会被替换,**并且不需要刷新页面**它甚至保持应用程序和修改组件的当前状态!当你调整模版或者修改样式时,这极大的提高了开发体验。
3+
"热重载"不是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改 `.vue` 文件时,所有该组件的实例会被替换,**并且不需要刷新页面**它甚至保持应用程序和被替换组件的当前状态!当你调整模版或者修改样式时,这极大的提高了开发体验。
44

55
![hot-reload](http://blog.evanyou.me/images/vue-hot.gif)
66

7-
当使用脚手架工具 `vue-cli` 时,热重载是开箱即用的。
7+
当使用脚手架工具 `vue-cli` 时,热重载是开箱即用的。

docs/zh-cn/features/postcss.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
- `.postcssrc`
1111
- `package.json` 中的 `postcss`
1212

13-
使用配置文件允许一份配置用于处理普通 CSS 文件(通过`postcss-loader`),和 `.vue` 文件内的 CSS,这是推荐做法
13+
使用配置文件允许你在由 `postcss-loader` 处理的普通CSS文件和 `*.vue` 文件中的 CSS 之间共享相同的配置,这是推荐的做法
1414

1515
## 内联选项
1616

@@ -54,9 +54,9 @@ module.exports = {
5454

5555
除了插件数组之外,`postcss` 配置选项也接受:
5656

57-
- 一个返回插件数组的函数
57+
- 返回插件数组的函数
5858

59-
- 一个对象包含配置选项,传递给 PostCSS 处理器。这在使用自定义 parser/stringifiers 时非常有用:
59+
- 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 `parser/stringifiers`时,这很有用:
6060

6161
``` js
6262
postcss: {

docs/zh-cn/features/scoped-css.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,10 @@
4242
</style>
4343
```
4444

45-
2. 子组件的根节点将同时受父组件作用域和子组件作用域的影响
45+
2. 子组件的根节点将同时受父组件和子组件作用域 CSS 的影响
4646

47-
3. 部分元素不受作用域影响部分
47+
3. Partials 不受作用域样式影响
4848

49-
4. **CSS 作用域不能代C替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式,`p { color: red }` 在作用域中会慢很多(即转换为属性选择器)。如果你使用 classes 或者 ids 代替,比如 `.example { color: red }`,这样几乎没有性能影响。[Here's a playground](http://stevesouders.com/efws/css-selectors/csscreate.php) 你可以测试它们的不同。
49+
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) 你可以测试它们的不同。
5050

5151
5. **在递归组件中小心使用后代选择器!** 对于带有选择器 `.a .b` 的CSS 规则,如果元素 `.a` 包含递归子组件,所有的子组件中的 `.b` 会被匹配。
52-

0 commit comments

Comments
 (0)