Skip to content

Commit 40d7e2f

Browse files
committed
[docs][zh] update
1 parent 1544a66 commit 40d7e2f

14 files changed

+51
-42
lines changed

docs/zh/README.md

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

3-
:::tip 版本注明
3+
:::tip 版本说明
44
这份文档是为 Vue Loader v15 及以上版本撰写的。如果你正在从 v14 或更早的版本往这里迁移,请查阅[迁移指南](../migrating.md)。如果你正在使用老版本,其对应的文档[在此](https://vue-loader-v14.vuejs.org)
55
:::
66

@@ -36,6 +36,6 @@ Vue Loader 还提供了很多酷炫的特性:
3636
- 允许在一个 `.vue` 文件中使用自定义块,并对其运用自定义的 loader 链;
3737
- 使用 webpack loader 将 `<style>``<template>` 中引用的资源当作模块依赖来处理;
3838
- 为每个组件模拟出 scoped CSS;
39-
- 在开发过程中可以保持状态的热重载
39+
- 在开发过程中使用热重载来保持状态
4040

41-
简而言之,webpack 和 Vue Loader 的结合为你提供了一个撰写 Vue.js 应用的、现代的、灵活的和极致强大的前端工作流
41+
简而言之,webpack 和 Vue Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流,来帮助撰写 Vue.js 应用

docs/zh/guide/README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
# 如何起步
1+
# 起步
22

33
## Vue CLI
44

5-
如果你没有手动设置 webpack 的兴趣,我们推荐使用 [Vue CLI](https://github.com/vuejs/vue-cli) 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会预配置好绝大多数的开发需求,它们开箱即用
5+
如果你不想手动设置 webpack,我们推荐使用 [Vue CLI](https://github.com/vuejs/vue-cli) 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置,做到开箱即用
66

7-
如果 Vue CLI 提供的内建的配置没有满足你的需求,或者你乐于从零开始创建你自己的 webpack 配置,那么请跟随这份指南
7+
如果 Vue CLI 提供的内建没有满足你的需求,或者你乐于从零开始创建你自己的 webpack 配置,那么请继续阅读这篇指南
88

99
## 手动配置
1010

11-
Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 `vue-loader` 应用到所有扩展名为 `.vue` 的文件上之外,请确认在你的 webpack 配置中添加 Vue Loader 的插件:
11+
Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 `vue-loader` 应用到所有扩展名为 `.vue` 的文件上之外,请确保在你的 webpack 配置中添加 Vue Loader 的插件:
1212

1313
``` js
1414
// webpack.config.js
@@ -25,15 +25,15 @@ module.exports = {
2525
]
2626
},
2727
plugins: [
28-
// 请确认引入这个插件
28+
// 请确保引入这个插件
2929
new VueLoaderPlugin()
3030
]
3131
}
3232
```
3333

34-
**这个插件是必须的!**它的职责是将你定义过的其它规则克隆并应用到 `.vue` 文件里相应语言的块。例如,如果你有一条匹配 `/\.js$` 的规则,那么它会应用到 `.vue` 文件里的 `<script>` 块。
34+
**这个插件是必须的!**它的职责是将你定义过的其它规则复制并应用到 `.vue` 文件里相应语言的块。例如,如果你有一条匹配 `/\.js$/` 的规则,那么它会应用到 `.vue` 文件里的 `<script>` 块。
3535

36-
一个更完整的 webpack 配置示例看起来像是如下的样子
36+
一个更完整的 webpack 配置示例看起来像这样
3737

3838
``` js
3939
// webpack.config.js
@@ -66,7 +66,7 @@ module.exports = {
6666
]
6767
},
6868
plugins: [
69-
// 请确认引入这个插件来实现这些魔力
69+
// 请确保引入这个插件来施展魔法
7070
new VueLoaderPlugin()
7171
]
7272
}

docs/zh/guide/asset-url.md

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@ createElement('img', {
2020

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

23+
``` js
24+
{
25+
video: ['src', 'poster'],
26+
source: 'src',
27+
img: 'src',
28+
image: 'xlink:href'
29+
}
30+
```
31+
2332
此外,如果你配置了为 `<style>` 块使用 [css-loader](https://github.com/webpack-contrib/css-loader),则你的 CSS 中的资源 URL 也会被同等处理。
2433

2534
## 转换规则
@@ -30,7 +39,7 @@ createElement('img', {
3039

3140
- 如果路径以 `.` 开头,将会被看作相对的模块依赖,并按照你的本地文件系统上的目录结构进行解析。
3241

33-
- 如果路径以 `~` 开头,其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 node 依赖中的资源:
42+
- 如果路径以 `~` 开头,其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源:
3443

3544
``` html
3645
<img src="~some-npm-package/foo.png">
@@ -46,6 +55,6 @@ createElement('img', {
4655

4756
转换资源 URL 的好处是:
4857

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

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

docs/zh/guide/css-modules.md

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

55
## 用法
66

@@ -86,7 +86,7 @@ export default {
8686

8787
你可以查阅 [CSS Modules 规范](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) 等。
8888

89-
## 可选加入的用法
89+
## 可选用法
9090

9191
如果你只想在某些 Vue 组件中使用 CSS Modules,你可以使用 `oneOf` 规则并在 `resourceQuery` 字符串中检查 `module` 字符串:
9292

@@ -122,7 +122,7 @@ export default {
122122

123123
## 和预处理器配合使用
124124

125-
CSS Modules 可以独立用于其它预处理器
125+
CSS Modules 可以与其它预处理器一起使用
126126

127127
``` js
128128
// webpack.config.js -> module.rules

docs/zh/guide/custom-blocks.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
`.vue` 文件中,你可以自定义语言块。应用于一个自定义块的 loader 是基于这个块的 `lang` 特性、块的标签名以及你的 webpack 配置进行匹配的。
44

5-
如果一个 `lang` 特性被指定,则这个自定义块将会作为一个带有该 `lang` 扩展名的文件进行匹配。
5+
如果指定了一个 `lang` 特性,则这个自定义块将会作为一个带有该 `lang` 扩展名的文件进行匹配。
66

77
你也可以使用 `resourceQuery` 来为一个没有 `lang` 的自定义块匹配一条规则。例如为了匹配自定义块 `<foo>`
88

@@ -43,7 +43,7 @@ module.exports = function (source, map) {
4343
}
4444
```
4545

46-
现在我们将会配置 webpack 来使用我们为 `<docs>` 自定义块撰写的自定义 loader。
46+
现在我们将会配置 webpack 来使用为 `<docs>` 自定义块撰写的自定义 loader。
4747

4848
``` js
4949
// wepback.config.js

docs/zh/guide/extract-css.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# CSS 提取
22

33
:::tip 提示
4-
请只在生产环境下使用 CSS 提取,这有便于你在开发环境下进行热重载
4+
请只在生产环境下使用 CSS 提取,这将便于你在开发环境下进行热重载
55
:::
66

77
## webpack 4
@@ -18,7 +18,7 @@ module.exports = {
1818
// 其它选项...
1919
module: {
2020
rules: [
21-
// ...其它规则忽略
21+
// ... 忽略其它规则
2222
{
2323
test: /\.css$/,
2424
use: [
@@ -31,7 +31,7 @@ module.exports = {
3131
]
3232
},
3333
plugins: [
34-
// ...vue-loader 插件忽略
34+
// ... 忽略 vue-loader 插件
3535
new MiniCssExtractPlugin({
3636
filename: style.css
3737
})

docs/zh/guide/hot-reload.md

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

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

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

docs/zh/guide/linting.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ eslint --ext js,vue MyComponent.vue
2525
npm install -D eslint eslint-loader
2626
```
2727

28-
请确认它是作为一个 pre-loader 运用的:
28+
请确保它是作为一个 pre-loader 运用的:
2929

3030
``` js
3131
// webpack.config.js

docs/zh/guide/pre-processors.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ sidebarDepth: 2
66

77
在 webpack 中,所有的预处理器需要匹配对应的 loader。Vue Loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 `lang` 特性以及你 webpack 配置中的规则自动推断出要使用的 loader。
88

9-
## SASS
9+
## Sass
1010

11-
例如,为了通过 SASS/SCSS 编译我们的 `<style>` 标签:
11+
例如,为了通过 Sass/SCSS 编译我们的 `<style>` 标签:
1212

1313
``` bash
1414
npm install -D sass-loader node-sass
@@ -20,10 +20,10 @@ npm install -D sass-loader node-sass
2020
module.exports = {
2121
module: {
2222
rules: [
23-
// ...其它规则忽略
23+
// ... 忽略其它规则
2424

2525
// 普通的 `.scss` 文件和 `*.vue` 文件中的
26-
// `<style lang="scss">` 块都运用它
26+
// `<style lang="scss">` 块都应用它
2727
{
2828
test: /\.scss$/,
2929
use: [
@@ -48,7 +48,7 @@ module.exports = {
4848

4949
这个块里的任何内容都会被 webpack 当作在一个 `*.scss` 文件中一样被处理。
5050

51-
### SASS vs SCSS
51+
### Sass vs SCSS
5252

5353
注意 `sass-loader` 会默认处理不基于缩进的 `scss` 语法。为了使用基于缩进的 `sass` 语法,你需要向这个 loader 传递选项:
5454

@@ -91,7 +91,7 @@ module.exports = {
9191
}
9292
```
9393

94-
## LESS
94+
## Less
9595

9696
``` bash
9797
npm install -D less less-loader
@@ -152,7 +152,7 @@ npm install -D postcss-loader
152152
}
153153
```
154154

155-
PostCSS 的配置可以通过 `postcss.config.js``postcss-loader` 选项来完成。其更多细节请咨询 [postcss-loader 文档](https://github.com/postcss/postcss-loader)
155+
PostCSS 的配置可以通过 `postcss.config.js``postcss-loader` 选项来完成。其更多细节请查阅 [postcss-loader 文档](https://github.com/postcss/postcss-loader)
156156

157157
`postcss-loader` 也可以和上述其它预处理器结合使用。
158158

@@ -182,12 +182,12 @@ npm install -D typescript ts-loader
182182
// webpack.config.js
183183
module.exports = {
184184
resolve: {
185-
// Add `.ts` as a resolvable extension.
185+
// `.ts` 添加为一个可解析的扩展名。
186186
extensions: ['.ts', '.js']
187187
},
188188
module: {
189189
rules: [
190-
// ...other rules omitted
190+
// ... 忽略其它规则
191191
{
192192
test: /\.ts$/,
193193
loader: 'ts-loader',

docs/zh/guide/scoped-css.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

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

33-
你可以在一个组件中同时使用有 scoped 和 non-scoped 样式:
33+
你可以在一个组件中同时使用有 scoped 和非 scoped 样式:
3434

3535
``` html
3636
<style>

docs/zh/guide/testing.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22

33
- [Vue CLI](https://github.com/vuejs/vue-cli) 提供了预配置的单元测试和 e2e 测试安装。
44

5-
- 如果你有兴趣为 `*.vue` 文件手动设置单元测试,请咨询 [@vue/test-utils](https://vue-test-utils.vuejs.org/zh-cn/) 的文档,这份文档涵盖了对 [mocha-webpack](https://vue-test-utils.vuejs.org/zh-cn/guides/testing-SFCs-with-mocha-webpack.html)[Jest](https://vue-test-utils.vuejs.org/zh-cn/guides/testing-SFCs-with-jest.html) 的设置。
5+
- 如果你有兴趣为 `*.vue` 文件手动设置单元测试,请查询 [@vue/test-utils](https://vue-test-utils.vuejs.org/zh-cn/) 的文档,这份文档涵盖了对 [mocha-webpack](https://vue-test-utils.vuejs.org/zh-cn/guides/testing-SFCs-with-mocha-webpack.html)[Jest](https://vue-test-utils.vuejs.org/zh-cn/guides/testing-SFCs-with-jest.html) 的设置。

docs/zh/migrating.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ sidebarDepth: 2
1313

1414
### 现在你需要一个插件
1515

16-
Vue Loader 15 现在需要伴随一个 webpack 插件才能正确使用:
16+
Vue Loader 15 现在需要配合一个 webpack 插件才能正确使用:
1717

1818
``` js
1919
// webpack.config.js
@@ -105,11 +105,11 @@ v14 或更低版本使用 [consolidate](https://github.com/tj/consolidate.js/)
105105

106106
现在客户端的样式注入会在最前面注入所有的样式以确保开发模式和提取模式下行为的一致性。
107107

108-
注意它们注入的顺序仍然是不受担保的,所以你撰写的 CSS 应该避免依赖插入的顺序。
108+
注意它们注入的顺序是不能保证的,所以你撰写的 CSS 应该避免依赖插入的顺序。
109109

110110
### PostCSS
111111

112-
Vue Loader v15 不再默认应用 PostCSS 变换。想要使用 PostCSS,请像为普通 CSS 文件一样的方式配置 `postcss-loader`
112+
Vue Loader v15 不再默认应用 PostCSS 变换。想要使用 PostCSS,请像配置普通 CSS 文件那样配置 `postcss-loader`
113113

114114
### CSS Modules
115115

docs/zh/options.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ sidebar: auto
4141
- 类型:`Object`
4242
- 默认值:`{}`
4343

44-
为渲染函数的生成码配置从 ES2015+ 到 ES5 的转译选项。这里的[转译器](https://github.com/vuejs/vue-template-es2015-compiler)是一份 [Buble](https://github.com/Rich-Harris/buble) 的 fork,因此你可以在[这里](https://buble.surge.sh/guide/#using-the-javascript-api)咨询可用的选项
44+
为渲染函数的生成码配置从 ES2015+ 到 ES5 的转译选项。这里的[转译器](https://github.com/vuejs/vue-template-es2015-compiler)是一份 [Buble](https://github.com/Rich-Harris/buble) 的 fork,因此你可以在[这里](https://buble.surge.sh/guide/#using-the-javascript-api)查阅可用的选项
4545

46-
模板渲染函数编译支持一个特殊的变换 `stripWith` (默认启用),它删除生成的渲染函数中的 `with` 用法,使它们兼容严格模式。
46+
模板渲染函数编译支持一个特殊的变换 `stripWith` (默认启用),它会删除生成的渲染函数中的 `with` 用法,使它们兼容严格模式。
4747

4848
## optimizeSSR
4949

docs/zh/spec.md

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

8484
### Src 导入
8585

86-
如果你喜欢分隔你的 `.vue` 文件到多个文件中,你可以通过 `src` 属性导入外部文件:
86+
如果喜欢把 `.vue` 文件分隔到多个文件中,你可以通过 `src` 属性导入外部文件:
8787

8888
``` vue
8989
<template src="./template.html"></template>
@@ -124,4 +124,4 @@ export default {
124124

125125
## 注释
126126

127-
在语言块中使用该语言块对应的注释语法 (HTML、CSS、JavaScript、Jade 等)。顶层注释使用 HTML 注释语法:`<!-- comment contents here -->`
127+
在语言块中使用该语言块对应的注释语法 (HTML、CSS、JavaScript、Jade 等)。顶层注释使用 HTML 注释语法:`<!-- comment contents here -->`

0 commit comments

Comments
 (0)