File tree Expand file tree Collapse file tree 7 files changed +17
-17
lines changed Expand file tree Collapse file tree 7 files changed +17
-17
lines changed Original file line number Diff line number Diff line change @@ -34,8 +34,8 @@ Vue Loader 还提供了很多酷炫的特性:
34
34
35
35
- 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 ` <style> ` 的部分使用 Sass 和在 ` <template> ` 的部分使用 Pug;
36
36
- 允许在一个 ` .vue ` 文件中使用自定义块,并对其运用自定义的 loader 链;
37
- - 使用 webpack loader 将 ` <style> ` 和 ` <template> ` 中引用的资产当作模块依赖来处理 ;
38
- - 为每个组件模拟出带作用域的 CSS;
37
+ - 使用 webpack loader 将 ` <style> ` 和 ` <template> ` 中引用的资源当作模块依赖来处理 ;
38
+ - 为每个组件模拟出 scoped CSS;
39
39
- 在开发过程中可以保持状态的热重载。
40
40
41
41
简而言之,webpack 和 Vue Loader 的结合为你提供了一个撰写 Vue.js 应用的、现代的、灵活的和极致强大的前端工作流。
Original file line number Diff line number Diff line change 1
- # 处理资产路径
1
+ # 处理资源路径
2
2
3
- 当 Vue Loader 编译单文件组件中的 ` <template> ` 块时,它也会将所有遇到的资产 URL URL 转换为 ** webpack 模块请求** 。
3
+ 当 Vue Loader 编译单文件组件中的 ` <template> ` 块时,它也会将所有遇到的资源 URL URL 转换为 ** webpack 模块请求** 。
4
4
5
5
例如,下面的模板代码片段
6
6
@@ -20,11 +20,11 @@ createElement('img', {
20
20
21
21
默认下列标签/特性的组合会被转换,且这些组合时可以使用 [ transformAssetUrls] ( ../options.md#transformasseturls ) 选项进行配置的。
22
22
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 也会被同等处理。
24
24
25
25
## 转换规则
26
26
27
- 资产 URL 转换会遵循如下规则:
27
+ 资源 URL 转换会遵循如下规则:
28
28
29
29
- 如果路径是绝对路径 (例如 ` /images/foo.png ` ),会原样保留。
30
30
@@ -44,7 +44,7 @@ createElement('img', {
44
44
45
45
## 为什么
46
46
47
- 转换资产 URL 的好处是:
47
+ 转换资源 URL 的好处是:
48
48
49
49
1 . ` file-loader ` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 ** 你可以就近管理图片文件,可以使用相对路径而不用担心布署时URL问题** 。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的URL。
50
50
Original file line number Diff line number Diff line change 1
1
# CSS Modules
2
2
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 的替代方案 。
4
4
5
5
## 用法
6
6
Original file line number Diff line number Diff line change 1
1
# 函数式组件
2
2
3
- 在一个 ` *.vue ` 文件中以单文件形式定义的函数式组件,现在在模板编译、有作用域的 CSS 和热重载也有了良好的支持。
3
+ 在一个 ` *.vue ` 文件中以单文件形式定义的函数式组件,现在在模板编译、scoped CSS 和热重载也有了良好的支持。
4
4
5
5
要声明一个应该编译为函数式组件的模板,请将 ` functional ` 特性添加到模板块中。这样做以后就可以省略 ` <script> ` 块中的 ` functional ` 选项。
6
6
Original file line number Diff line number Diff line change 1
- # 有作用域的 CSS
1
+ # Scoped CSS
2
2
3
3
当 ` <style> ` 标签有 ` scoped ` 属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项,但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换:
4
4
30
30
31
31
## 混用本地和全局样式
32
32
33
- 你可以在一个组件中同时使用有作用域和无作用域的样式 :
33
+ 你可以在一个组件中同时使用有 scoped 和 non-scoped 样式 :
34
34
35
35
``` html
36
36
<style >
44
44
45
45
## 子组件的根元素
46
46
47
- 使用 ` scoped ` 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
47
+ 使用 ` scoped ` 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
48
48
49
49
## 深度作用选择器
50
50
66
66
67
67
## 动态生成的内容
68
68
69
- 通过 ` v-html ` 创建的 DOM 内容不受作用域内的样式影响 ,但是你仍然可以通过深度作用选择器来为他们设置样式。
69
+ 通过 ` v-html ` 创建的 DOM 内容不受 scoped 样式影响 ,但是你仍然可以通过深度作用选择器来为他们设置样式。
70
70
71
71
## 还有一些要留意
72
72
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 ) 中测试它们的不同。
74
74
75
75
- ** 在递归组件中小心使用后代选择器!** 对选择器 ` .a .b ` 中的 CSS 规则来说,如果匹配 ` .a ` 的元素包含一个递归子组件,则所有的子组件中的 ` .b ` 都将被这个规则匹配。
Original file line number Diff line number Diff line change @@ -18,7 +18,7 @@ sidebar: auto
18
18
}
19
19
```
20
20
21
- 在模板编译过程中,编译器可以将某些特性转换为 ` require ` 调用,例如 ` src ` 中的 URL。因此这些目标资产可以被 webpack 处理。例如 ` <img src="./foo.png"> ` 会找到你文件系统中的 ` ./foo.png ` 并将其作为一个依赖包含在你的包里。
21
+ 在模板编译过程中,编译器可以将某些特性转换为 ` require ` 调用,例如 ` src ` 中的 URL。因此这些目标资源可以被 webpack 处理。例如 ` <img src="./foo.png"> ` 会找到你文件系统中的 ` ./foo.png ` 并将其作为一个依赖包含在你的包里。
22
22
23
23
## compiler
24
24
Original file line number Diff line number Diff line change @@ -71,7 +71,7 @@ export default {
71
71
72
72
- 一个 ` .vue ` 文件可以包含多个 ` <style> ` 标签。
73
73
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> ` 标签可以在同一个组件中混合使用。
75
75
76
76
- 任何匹配 ` .css ` 文件 (或通过它的 ` lang ` 特性指定的扩展名) 的 webpack 规则都将会运用到这个 ` <style> ` 块的内容中。
77
77
@@ -94,7 +94,7 @@ export default {
94
94
需要注意的是 ` src ` 导入遵循和 webpack 模块请求相同的路径解析规则,这意味着:
95
95
96
96
- 相对路径需要以 ` ./ ` 开始
97
- - 你可以从 NPM 依赖中导入资产 :
97
+ - 你可以从 NPM 依赖中导入资源 :
98
98
99
99
``` vue
100
100
<!-- import a file from the installed "todomvc-app-css" npm package -->
You can’t perform that action at this time.
0 commit comments