Skip to content

[zh-cn] typos & improvements in #989 #992

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 26, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions docs/zh-cn/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@

这里有一些 `vue-loader` 提供的很酷的特性:

- ES2015 默认支持;
- 允许对 Vue 组件的组成部分使用其它 Webpack loaders,比如对 `<style>` 使用 SASS 和对 `<template>` 使用 Jade;
- `.vue` 文件中允许自定义节点,然后使用自定义的 loader 处理他们
- 把 `<style>` 和 `<template>` 中的静态资源当作模块来对待,并使用 Webpack loaders 进行处理;
- 默认支持 ES2015
- 允许对 Vue 组件的组成部分使用其它 Webpack loader,比如对 `<style>` 使用 SASS 和对 `<template>` 使用 Jade;
- `.vue` 文件中允许自定义节点,然后使用自定义的 loader 进行处理
- 把 `<style>` 和 `<template>` 中的静态资源当作模块来对待,并使用 Webpack loader 进行处理;
- 对每个组件模拟出 CSS 作用域;
- 支持开发期组件的热重载。

Expand All @@ -21,13 +21,13 @@

如果你已经熟悉了 Webpack,随时可以跳过下面的说明。如果你没有使用过 Webpack,下面是一个快速介绍:

[Webpack](https://webpack.github.io/) 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块,找出他们的依赖关系,将它们打包为可部署的静态资源。
[Webpack](https://webpack.github.io/) 是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块,找出它们的依赖关系,将它们打包为可部署的静态资源。

![webpack](https://webpack.github.io/assets/what-is-webpack.png)

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

但是 Webpack 可以做的不止这些。使用 "loaders",我们可以配置 Webpack 以任何方式去转换所有类型的文件。包括以下例子:
但是 Webpack 可以做的不止这些。通过“loader”,我们可以配置 Webpack 以任何方式去转换所有类型的文件。包括以下例子:

- 转换 ES2015,CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块;
- 可以选择在编译之前检验你的源代码;
Expand Down
2 changes: 1 addition & 1 deletion docs/zh-cn/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
- 特性
- [ES2015](features/es2015.md)
- [CSS 作用域](features/scoped-css.md)
- [CSS 模块](features/css-modules.md)
- [CSS Modules](features/css-modules.md)
- [PostCSS](features/postcss.md)
- [热重载](features/hot-reload.md)
- 配置
Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/configurations/asset-url.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 资源路径处理

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

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

Expand All @@ -18,6 +18,6 @@ createElement('img', { attrs: { src: require('../image.png') }})

使用它们的好处:

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

2. `url-loader` 允许你有条件将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减少小文件的 HTTP 请求。如果文件大于该阈值,会自动的交给 `file-loader` 处理。
2 changes: 1 addition & 1 deletion docs/zh-cn/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

在 `.vue` 文件中,你可以自定义语言块。自定义块的内容将由 `vue-loader` 的 options 中的 `loader` 对象中指定的 loader 处理,然后被组件模块依赖。类似 [Loader 进阶配置](../configurations/advanced.md)中的配置,但使用的是标签名匹配,而不是 `lang` 属性。

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

## 单个文档文件的例子
Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/configurations/pre-processors.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 使用预处理器

在 Webpack 中,所有的预处理器需要匹配对应的 loader。`vue-loader` 允许你使用其它 Webpack loaders 处理 Vue 组件的某一部分。它会根据 `lang` 属性自动推断出要使用的 loaders
在 Webpack 中,所有的预处理器需要匹配对应的 loader。`vue-loader` 允许你使用其它 Webpack loader 处理 Vue 组件的某一部分。它会根据 `lang` 属性自动推断出要使用的 loader

### CSS

Expand Down Expand Up @@ -35,7 +35,7 @@ npm install sass-loader node-sass --save-dev
}
```

如要获得更多关于 `vue-loader` 的配置信息,请查看 [Loader 进阶配置](./advanced.md)章节。
如要获得更多关于 `vue-loader` 的配置信息,请查看 [loader 进阶配置](./advanced.md)章节。

### 加载一个全局设置文件

Expand Down
10 changes: 5 additions & 5 deletions docs/zh-cn/features/css-modules.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# CSS 模块
# CSS Modules

> 需要 ^9.8.0

[CSS 模块](https://github.com/css-modules/css-modules)是一个用于模块化和组合 CSS的流行系统。`vue-loader` 提供了与 CSS 模块的一流集成,可以作为模拟 CSS 作用域的替代方案。
[CSS Modules](https://github.com/css-modules/css-modules)是一个用于模块化和组合 CSS 的流行系统。`vue-loader` 提供了与 CSS 模块的一流集成,可以作为模拟 CSS 作用域的替代方案。

### 使用

Expand All @@ -19,7 +19,7 @@
</style>
```

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

``` html
<template>
Expand Down Expand Up @@ -58,7 +58,7 @@ export default {
</script>
```

请参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 了解更多诸如 [global exceptions](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition) 等详细信息。
请参考 [CSS Modules 规范](https://github.com/css-modules/css-modules)了解更多诸如 [global exception](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition) 等详细信息。

### 自定义注入名称

Expand All @@ -76,7 +76,7 @@ export default {

### 配置 `css-loader` Query

CSS 模块处理是通过 [css-loader](https://github.com/webpack/css-loader)。默认 query 如下:
CSS Modules 处理是通过 [css-loader](https://github.com/webpack/css-loader)。默认 query 如下:

``` js
{
Expand Down
2 changes: 1 addition & 1 deletion docs/zh-cn/features/scoped-css.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# CSS 作用域

当 `<style>` 标签有 `scoped` 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 polyfills。它通过使用 PostCSS 来实现以下转换:
当 `<style>` 标签有 `scoped` 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换:

``` html
<style scoped>
Expand Down
2 changes: 1 addition & 1 deletion docs/zh-cn/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,6 @@ module.exports = {
> 12.1.1 新增

- 类型: `boolean`
- 默认值: 当 webpack config 中包含 `target: 'node'` 且 `vue-template-compiler` 版本号大于等于 2.4.0 时为 `true`。
- 默认值: 当 webpack 配置中包含 `target: 'node'` 且 `vue-template-compiler` 版本号大于等于 2.4.0 时为 `true`。

开启 Vue 2.4 服务端渲染的编译优化之后,渲染函数将会把返回的 vdom 树的一部分编译为字符串,以提升服务端渲染的性能。在一些情况下,你可能想要明确的将其关掉,因为该渲染函数只能用于服务端渲染,而不能用于客户端渲染或测试环境。
10 changes: 5 additions & 5 deletions docs/zh-cn/start/spec.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@ export default {

- 默认语言:`html`。

- 每个 `.vue` 文件最多包含一个 `<template>` 块
- 每个 `.vue` 文件最多包含一个 `<template>` 块

- 内容将被提取为字符串,将编译并用作 Vue 组件的 `template` 选项。

#### `<script>`

- 默认语言:`js` (在检测到 `babel-loader` 或 `buble-loader` 配置时自动支持ES2015)。

- 每个 `.vue` 文件最多包含一个 `<script>` 块
- 每个 `.vue` 文件最多包含一个 `<script>` 块

- 该脚本在类 CommonJS 环境中执行 (就像通过 Webpack 打包的正常 js 模块),这意味这你可以 `require()` 其它依赖。在 ES2015 支持下,你也可以使用 `import` 和 `export` 语法。

Expand All @@ -66,15 +66,15 @@ export default {

- 一个 `.vue` 文件可以包含多个 `<style>` 标签。

- `<style>` 标签可以有 `scoped` 或者 `module` 属性 (查看 [CSS 作用域](../features/scoped-css.md)和 [CSS 模块](../features/css-modules.md)) 以帮助你将样式封装到当前组件。具有不同封装模式的多个 `<style>` 标签可以在同一个组件中混合使用。
- `<style>` 标签可以有 `scoped` 或者 `module` 属性 (查看 [CSS 作用域](../features/scoped-css.md)和 [CSS Modules](../features/css-modules.md)) 以帮助你将样式封装到当前组件。具有不同封装模式的多个 `<style>` 标签可以在同一个组件中混合使用。

- 默认情况下,将会使用 `style-loader` 提取内容,并通过 `<style>` 标签动态加入文档的 `<head>` 中,也可以[配置 Webpack 将所有 styles 提取到单个 CSS 文件中](../configurations/extract-css.md)。

### 自定义块

> 只在 vue-loader 10.2.0+ 中支持

可以在 `.vue` 文件中添加额外的自定义块来实现项目的特定需求,例如 `<docs>` 块。`vue-loader` 将会使用标签名来查找对应的 webpack loaders 来应用在对应的块上。webpack loaders 需要在 `vue-loader` 的选项 `loaders` 中指定。
可以在 `.vue` 文件中添加额外的自定义块来实现项目的特定需求,例如 `<docs>` 块。`vue-loader` 将会使用标签名来查找对应的 webpack loader 来应用在对应的块上。Webpack loader 需要在 `vue-loader` 的选项 `loaders` 中指定。

更多细节,查看[自定义块](../configurations/custom-blocks.md)。

Expand Down Expand Up @@ -105,7 +105,7 @@ export default {
### 语法高亮


目前语法高亮支持 [Sublime Text](https://github.com/vuejs/vue-syntax-highlight)、[Atom](https://atom.io/packages/language-vue)、[Vim](https://github.com/posva/vim-vue)、[Visual Studio Code](https://marketplace.visualstudio.com/items/liuji-jim.vue)、[Brackets](https://github.com/pandao/brackets-vue) 和 [JetBrains products](https://plugins.jetbrains.com/plugin/8057) (WebStorm、PhpStorm 等)。非常感谢其他编辑器/IDEs 所做的贡献!如果在 Vue 组件中没有使用任何预处理器,你可以把 `.vue` 文件当作 HTML 对待。
目前语法高亮支持 [Sublime Text](https://github.com/vuejs/vue-syntax-highlight)、[Atom](https://atom.io/packages/language-vue)、[Vim](https://github.com/posva/vim-vue)、[Visual Studio Code](https://marketplace.visualstudio.com/items/liuji-jim.vue)、[Brackets](https://github.com/pandao/brackets-vue) 和 [JetBrains products](https://plugins.jetbrains.com/plugin/8057) (WebStorm、PhpStorm 等)。非常感谢其他编辑器/IDE 所做的贡献!如果在 Vue 组件中没有使用任何预处理器,你可以把 `.vue` 文件当作 HTML 对待。

### 注释

Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/workflow/linting.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 代码检验

你可能有疑问,在 `.vue` 文件中你怎么检验你的代码,因为它不是 Javascript。我们假设你使用 [ESLint](https://eslint.org/) (如果你没有使用话,你应该去使用!)。
你可能有疑问,在 `.vue` 文件中你怎么检验你的代码,因为它不是 JavaScript。我们假设你使用 [ESLint](https://eslint.org/) (如果你没有使用话,你应该去使用!)。

你还需要 [eslint-plugin-html](https://github.com/BenoitZugmeyer/eslint-plugin-html) 来支持提取并检验你的 `.vue` 文件中的 JavaScript。

Expand Down Expand Up @@ -40,7 +40,7 @@ module.exports = {

注意 Webpack loader 处理顺序是 **从右到左**。确保在 `vue` 之前应用 `eslint`,这样才能检验编译前的代码。

我们需要考虑使用的 NPM 包中的第三方 `.vue` 组件,实际使用中我们希望使用 `vue-loader` 去处理第三方组件,但是不想检验它们。我们需要把 linting 配置到 Webpack 的 [preLoaders](https://webpack.github.io/docs/loaders.html#loader-order) 中:
我们需要考虑使用的 NPM 包中的第三方 `.vue` 组件,实际使用中我们希望使用 `vue-loader` 去处理第三方组件,但是不想检验它们。我们需要把 lint 配置到 Webpack 的 [preLoaders](https://webpack.github.io/docs/loaders.html#loader-order) 中:

``` js
// webpack.config.js
Expand Down
2 changes: 1 addition & 1 deletion docs/zh-cn/workflow/testing-with-mocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ npm install inject-loader@^2.0.0 --save-dev
const ExampleInjector = require('!!vue?inject!./example.vue')
```

请注意 crazy require string - 我们在这里使用一些内联 [webpack loader requests](https://webpack.github.io/docs/loaders.html)。简要解释
请注意那些超长的依赖字符串——也就是我们使用的一些内联 [webpack loader 依赖](https://webpack.github.io/docs/loaders.html)。简要解释一下

- 以 `!!` 打头意味着 “禁用全局配置中的所有 loader”;
- `vue?inject!`意思是 “使用 `vue` loader,并传入 `?inject` 查询”。这告诉 `vue-loader` 在依赖注入模式下编译组件。
Expand Down