Skip to content

Commit 8c4daf7

Browse files
committed
[docs][zh] fixed scoped & assets
1 parent 10f9ef2 commit 8c4daf7

File tree

7 files changed

+17
-17
lines changed

7 files changed

+17
-17
lines changed

docs/zh/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ Vue Loader 还提供了很多酷炫的特性:
3434

3535
- 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 `<style>` 的部分使用 Sass 和在 `<template>` 的部分使用 Pug;
3636
- 允许在一个 `.vue` 文件中使用自定义块,并对其运用自定义的 loader 链;
37-
- 使用 webpack loader 将 `<style>``<template>` 中引用的资产当作模块依赖来处理
38-
- 为每个组件模拟出带作用域的 CSS;
37+
- 使用 webpack loader 将 `<style>``<template>` 中引用的资源当作模块依赖来处理
38+
- 为每个组件模拟出 scoped CSS;
3939
- 在开发过程中可以保持状态的热重载。
4040

4141
简而言之,webpack 和 Vue Loader 的结合为你提供了一个撰写 Vue.js 应用的、现代的、灵活的和极致强大的前端工作流。

docs/zh/guide/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 编译单文件组件中的 `<template>` 块时,它也会将所有遇到的资产 URL URL 转换为 **webpack 模块请求**
3+
当 Vue Loader 编译单文件组件中的 `<template>` 块时,它也会将所有遇到的资源 URL URL 转换为 **webpack 模块请求**
44

55
例如,下面的模板代码片段
66

@@ -20,11 +20,11 @@ createElement('img', {
2020

2121
默认下列标签/特性的组合会被转换,且这些组合时可以使用 [transformAssetUrls](../options.md#transformasseturls) 选项进行配置的。
2222

23-
额外的,如果你配置了为 `<style>` 块使用 [css-loader](https://github.com/webpack-contrib/css-loader),则你的 CSS 中的资产 URL 也会被同等处理。
23+
额外的,如果你配置了为 `<style>` 块使用 [css-loader](https://github.com/webpack-contrib/css-loader),则你的 CSS 中的资源 URL 也会被同等处理。
2424

2525
## 转换规则
2626

27-
资产 URL 转换会遵循如下规则:
27+
资源 URL 转换会遵循如下规则:
2828

2929
- 如果路径是绝对路径 (例如 `/images/foo.png`),会原样保留。
3030

@@ -44,7 +44,7 @@ createElement('img', {
4444

4545
## 为什么
4646

47-
转换资产 URL 的好处是:
47+
转换资源 URL 的好处是:
4848

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

docs/zh/guide/css-modules.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# CSS Modules
22

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

55
## 用法
66

docs/zh/guide/functional.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# 函数式组件
22

3-
在一个 `*.vue` 文件中以单文件形式定义的函数式组件,现在在模板编译、有作用域的 CSS 和热重载也有了良好的支持。
3+
在一个 `*.vue` 文件中以单文件形式定义的函数式组件,现在在模板编译、scoped CSS 和热重载也有了良好的支持。
44

55
要声明一个应该编译为函数式组件的模板,请将 `functional` 特性添加到模板块中。这样做以后就可以省略 `<script>` 块中的 `functional` 选项。
66

docs/zh/guide/scoped-css.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 有作用域的 CSS
1+
# Scoped CSS
22

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

@@ -30,7 +30,7 @@
3030

3131
## 混用本地和全局样式
3232

33-
你可以在一个组件中同时使用有作用域和无作用域的样式
33+
你可以在一个组件中同时使用有 scoped 和 non-scoped 样式
3434

3535
``` html
3636
<style>
@@ -44,7 +44,7 @@
4444

4545
## 子组件的根元素
4646

47-
使用 `scoped` 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
47+
使用 `scoped` 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
4848

4949
## 深度作用选择器
5050

@@ -66,10 +66,10 @@
6666

6767
## 动态生成的内容
6868

69-
通过 `v-html` 创建的 DOM 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式。
69+
通过 `v-html` 创建的 DOM 内容不受 scoped 样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式。
7070

7171
## 还有一些要留意
7272

73-
- **CSS 作用域不能代替 class**。考虑到浏览器渲染各种 CSS 选择器的方式,当 `p { color: red }` 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 `.example { color: red }`,性能影响就会消除。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)中测试它们的不同。
73+
- **Scoped 样式不能代替 class**。考虑到浏览器渲染各种 CSS 选择器的方式,当 `p { color: red }` 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 `.example { color: red }`,性能影响就会消除。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)中测试它们的不同。
7474

7575
- **在递归组件中小心使用后代选择器!** 对选择器 `.a .b` 中的 CSS 规则来说,如果匹配 `.a` 的元素包含一个递归子组件,则所有的子组件中的 `.b` 都将被这个规则匹配。

docs/zh/options.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ sidebar: auto
1818
}
1919
```
2020

21-
在模板编译过程中,编译器可以将某些特性转换为 `require` 调用,例如 `src` 中的 URL。因此这些目标资产可以被 webpack 处理。例如 `<img src="./foo.png">` 会找到你文件系统中的 `./foo.png` 并将其作为一个依赖包含在你的包里。
21+
在模板编译过程中,编译器可以将某些特性转换为 `require` 调用,例如 `src` 中的 URL。因此这些目标资源可以被 webpack 处理。例如 `<img src="./foo.png">` 会找到你文件系统中的 `./foo.png` 并将其作为一个依赖包含在你的包里。
2222

2323
## compiler
2424

docs/zh/spec.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default {
7171

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

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

7676
- 任何匹配 `.css` 文件 (或通过它的 `lang` 特性指定的扩展名) 的 webpack 规则都将会运用到这个 `<style>` 块的内容中。
7777

@@ -94,7 +94,7 @@ export default {
9494
需要注意的是 `src` 导入遵循和 webpack 模块请求相同的路径解析规则,这意味着:
9595

9696
- 相对路径需要以 `./` 开始
97-
- 你可以从 NPM 依赖中导入资产
97+
- 你可以从 NPM 依赖中导入资源
9898

9999
``` vue
100100
<!-- import a file from the installed "todomvc-app-css" npm package -->

0 commit comments

Comments
 (0)