Commit 8c4daf7a authored by Jinjiang's avatar Jinjiang

[docs][zh] fixed scoped & assets

parent 10f9ef2d
...@@ -34,8 +34,8 @@ Vue Loader 还提供了很多酷炫的特性: ...@@ -34,8 +34,8 @@ Vue Loader 还提供了很多酷炫的特性:
- 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 `<style>` 的部分使用 Sass 和在 `<template>` 的部分使用 Pug; - 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 `<style>` 的部分使用 Sass 和在 `<template>` 的部分使用 Pug;
- 允许在一个 `.vue` 文件中使用自定义块,并对其运用自定义的 loader 链; - 允许在一个 `.vue` 文件中使用自定义块,并对其运用自定义的 loader 链;
- 使用 webpack loader 将 `<style>``<template>` 中引用的资当作模块依赖来处理; - 使用 webpack loader 将 `<style>``<template>` 中引用的资当作模块依赖来处理;
- 为每个组件模拟出带作用域的 CSS; - 为每个组件模拟出 scoped CSS;
- 在开发过程中可以保持状态的热重载。 - 在开发过程中可以保持状态的热重载。
简而言之,webpack 和 Vue Loader 的结合为你提供了一个撰写 Vue.js 应用的、现代的、灵活的和极致强大的前端工作流。 简而言之,webpack 和 Vue Loader 的结合为你提供了一个撰写 Vue.js 应用的、现代的、灵活的和极致强大的前端工作流。
# 处理资路径 # 处理资路径
当 Vue Loader 编译单文件组件中的 `<template>` 块时,它也会将所有遇到的资 URL URL 转换为 **webpack 模块请求** 当 Vue Loader 编译单文件组件中的 `<template>` 块时,它也会将所有遇到的资 URL URL 转换为 **webpack 模块请求**
例如,下面的模板代码片段 例如,下面的模板代码片段
...@@ -20,11 +20,11 @@ createElement('img', { ...@@ -20,11 +20,11 @@ createElement('img', {
默认下列标签/特性的组合会被转换,且这些组合时可以使用 [transformAssetUrls](../options.md#transformasseturls) 选项进行配置的。 默认下列标签/特性的组合会被转换,且这些组合时可以使用 [transformAssetUrls](../options.md#transformasseturls) 选项进行配置的。
额外的,如果你配置了为 `<style>` 块使用 [css-loader](https://github.com/webpack-contrib/css-loader),则你的 CSS 中的资 URL 也会被同等处理。 额外的,如果你配置了为 `<style>` 块使用 [css-loader](https://github.com/webpack-contrib/css-loader),则你的 CSS 中的资 URL 也会被同等处理。
## 转换规则 ## 转换规则
URL 转换会遵循如下规则: URL 转换会遵循如下规则:
- 如果路径是绝对路径 (例如 `/images/foo.png`),会原样保留。 - 如果路径是绝对路径 (例如 `/images/foo.png`),会原样保留。
...@@ -44,7 +44,7 @@ createElement('img', { ...@@ -44,7 +44,7 @@ createElement('img', {
## 为什么 ## 为什么
转换资 URL 的好处是: 转换资 URL 的好处是:
1. `file-loader` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 **你可以就近管理图片文件,可以使用相对路径而不用担心布署时URL问题**。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的URL。 1. `file-loader` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 **你可以就近管理图片文件,可以使用相对路径而不用担心布署时URL问题**。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的URL。
......
# CSS Modules # CSS Modules
[CSS Modules](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 模块的一流集成,可以作为模拟 scoped CSS 的替代方案。
## 用法 ## 用法
......
# 函数式组件 # 函数式组件
在一个 `*.vue` 文件中以单文件形式定义的函数式组件,现在在模板编译、有作用域的 CSS 和热重载也有了良好的支持。 在一个 `*.vue` 文件中以单文件形式定义的函数式组件,现在在模板编译、scoped CSS 和热重载也有了良好的支持。
要声明一个应该编译为函数式组件的模板,请将 `functional` 特性添加到模板块中。这样做以后就可以省略 `<script>` 块中的 `functional` 选项。 要声明一个应该编译为函数式组件的模板,请将 `functional` 特性添加到模板块中。这样做以后就可以省略 `<script>` 块中的 `functional` 选项。
......
# 有作用域的 CSS # Scoped CSS
`<style>` 标签有 `scoped` 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换: `<style>` 标签有 `scoped` 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换:
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
## 混用本地和全局样式 ## 混用本地和全局样式
你可以在一个组件中同时使用有作用域和无作用域的样式: 你可以在一个组件中同时使用有 scoped 和 non-scoped 样式:
``` html ``` html
<style> <style>
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
## 子组件的根元素 ## 子组件的根元素
使用 `scoped` 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。 使用 `scoped` 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
## 深度作用选择器 ## 深度作用选择器
...@@ -66,10 +66,10 @@ ...@@ -66,10 +66,10 @@
## 动态生成的内容 ## 动态生成的内容
通过 `v-html` 创建的 DOM 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式。 通过 `v-html` 创建的 DOM 内容不受 scoped 样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式。
## 还有一些要留意 ## 还有一些要留意
- **CSS 作用域不能代替 class**。考虑到浏览器渲染各种 CSS 选择器的方式,当 `p { color: red }` 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 `.example { color: red }`,性能影响就会消除。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)中测试它们的不同。 - **Scoped 样式不能代替 class**。考虑到浏览器渲染各种 CSS 选择器的方式,当 `p { color: red }` 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如 `.example { color: red }`,性能影响就会消除。你可以在[这块试验田](https://stevesouders.com/efws/css-selectors/csscreate.php)中测试它们的不同。
- **在递归组件中小心使用后代选择器!** 对选择器 `.a .b` 中的 CSS 规则来说,如果匹配 `.a` 的元素包含一个递归子组件,则所有的子组件中的 `.b` 都将被这个规则匹配。 - **在递归组件中小心使用后代选择器!** 对选择器 `.a .b` 中的 CSS 规则来说,如果匹配 `.a` 的元素包含一个递归子组件,则所有的子组件中的 `.b` 都将被这个规则匹配。
...@@ -18,7 +18,7 @@ sidebar: auto ...@@ -18,7 +18,7 @@ sidebar: auto
} }
``` ```
在模板编译过程中,编译器可以将某些特性转换为 `require` 调用,例如 `src` 中的 URL。因此这些目标资可以被 webpack 处理。例如 `<img src="./foo.png">` 会找到你文件系统中的 `./foo.png` 并将其作为一个依赖包含在你的包里。 在模板编译过程中,编译器可以将某些特性转换为 `require` 调用,例如 `src` 中的 URL。因此这些目标资可以被 webpack 处理。例如 `<img src="./foo.png">` 会找到你文件系统中的 `./foo.png` 并将其作为一个依赖包含在你的包里。
## compiler ## compiler
......
...@@ -71,7 +71,7 @@ export default { ...@@ -71,7 +71,7 @@ export default {
- 一个 `.vue` 文件可以包含多个 `<style>` 标签。 - 一个 `.vue` 文件可以包含多个 `<style>` 标签。
- `<style>` 标签可以有 `scoped` 或者 `module` 属性 (查看 [CSS 作用域](./guide/scoped-css.md)[CSS Modules](./guide/css-modules.md)) 以帮助你将样式封装到当前组件。具有不同封装模式的多个 `<style>` 标签可以在同一个组件中混合使用。 - `<style>` 标签可以有 `scoped` 或者 `module` 属性 (查看 [scoped CSS](./guide/scoped-css.md)[CSS Modules](./guide/css-modules.md)) 以帮助你将样式封装到当前组件。具有不同封装模式的多个 `<style>` 标签可以在同一个组件中混合使用。
- 任何匹配 `.css` 文件 (或通过它的 `lang` 特性指定的扩展名) 的 webpack 规则都将会运用到这个 `<style>` 块的内容中。 - 任何匹配 `.css` 文件 (或通过它的 `lang` 特性指定的扩展名) 的 webpack 规则都将会运用到这个 `<style>` 块的内容中。
...@@ -94,7 +94,7 @@ export default { ...@@ -94,7 +94,7 @@ export default {
需要注意的是 `src` 导入遵循和 webpack 模块请求相同的路径解析规则,这意味着: 需要注意的是 `src` 导入遵循和 webpack 模块请求相同的路径解析规则,这意味着:
- 相对路径需要以 `./` 开始 - 相对路径需要以 `./` 开始
- 你可以从 NPM 依赖中导入资 - 你可以从 NPM 依赖中导入资
``` vue ``` vue
<!-- import a file from the installed "todomvc-app-css" npm package --> <!-- import a file from the installed "todomvc-app-css" npm package -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment