File tree Expand file tree Collapse file tree 11 files changed +18
-18
lines changed Expand file tree Collapse file tree 11 files changed +18
-18
lines changed Original file line number Diff line number Diff line change 2
2
3
3
When Vue Loader compiles the ` <template> ` blocks in SFCs, it also converts any encountered asset URLs into ** webpack module requests** .
4
4
5
- For example, the following template snippet
5
+ For example, the following template snippet:
6
6
7
7
``` vue
8
8
<img src="../image.png">
Original file line number Diff line number Diff line change 1
1
# 介绍
2
2
3
3
:::tip 版本注明
4
- 这份文档是为 Vue Loader v15 及以上版本撰写的。如果你正在从 v14 或更早的版本往这里迁移,请查阅[ 迁移指南] ( ../migrating.md ) 。如果你正在使用老版本,其对应的就文档 [ 在此] ( https://vue-loader-v14.vuejs.org ) 。
4
+ 这份文档是为 Vue Loader v15 及以上版本撰写的。如果你正在从 v14 或更早的版本往这里迁移,请查阅[ 迁移指南] ( ../migrating.md ) 。如果你正在使用老版本,其对应的文档 [ 在此] ( https://vue-loader-v14.vuejs.org ) 。
5
5
:::
6
6
7
7
## Vue Loader 是什么?
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 转换为 ** webpack 模块请求** 。
4
4
5
- 例如,下面的模板代码片段
5
+ 例如,下面的模板代码片段:
6
6
7
7
``` vue
8
8
<img src="../image.png">
@@ -20,7 +20,7 @@ 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
@@ -40,12 +40,12 @@ createElement('img', {
40
40
41
41
## 相关的 Loader
42
42
43
- 因为像 ` .png ` 这样的文件不是一个 JavaScript 模块,你需要配置 webpack 使用 [ file-loader] ( https://github.com/webpack/file-loader ) 或者 [ url-loader] ( https://github.com/webpack/url-loader ) 去合理的处理它们 。通过 Vue CLI 创建的项目已经把这些预配置好了。
43
+ 因为像 ` .png ` 这样的文件不是一个 JavaScript 模块,你需要配置 webpack 使用 [ file-loader] ( https://github.com/webpack/file-loader ) 或者 [ url-loader] ( https://github.com/webpack/url-loader ) 去合理地处理它们 。通过 Vue CLI 创建的项目已经把这些预配置好了。
44
44
45
45
## 为什么
46
46
47
47
转换资源 URL 的好处是:
48
48
49
- 1 . ` file-loader ` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 ** 你可以就近管理图片文件,可以使用相对路径而不用担心布署时URL问题 ** 。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的URL。
49
+ 1 . ` file-loader ` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存。此外,这意味着 ** 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题 ** 。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的URL。
50
50
51
- 2 . ` url-loader ` 允许你有条件将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减少小文件的 HTTP 请求。如果文件大于该阈值,会自动的交给 ` file-loader ` 处理。
51
+ 2 . ` url-loader ` 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值),这会减少小文件的 HTTP 请求。如果文件大于该阈值,会自动的交给 ` file-loader ` 处理。
Original file line number Diff line number Diff line change 21
21
22
22
如果找到了一个自定义块的匹配规则,它将会被处理,否则该自定义块会被默默忽略。
23
23
24
- 额外的 ,如果这个自定义块被所有匹配的 loader 处理之后导出一个函数作为最终结果,则这个 ` *.vue ` 文件的组件会作为一个参数被这个函数调用。
24
+ 此外 ,如果这个自定义块被所有匹配的 loader 处理之后导出一个函数作为最终结果,则这个 ` *.vue ` 文件的组件会作为一个参数被这个函数调用。
25
25
26
26
## Example
27
27
Original file line number Diff line number Diff line change 1
1
# CSS 提取
2
2
3
3
:::tip 提示
4
- 只有生产环境才会运用 CSS 提取,这有便于你在开发环境下进行热重载。
4
+ 请只在生产环境下使用 CSS 提取,这有便于你在开发环境下进行热重载。
5
5
:::
6
6
7
7
## webpack 4
Original file line number Diff line number Diff line change 1
1
# 函数式组件
2
2
3
- 在一个 ` *.vue ` 文件中以单文件形式定义的函数式组件,现在在模板编译 、scoped 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
1
# 热重载
2
2
3
- "热重载"不是当你修改文件的时候简单重新加载页面 。启用热重载后,当你修改 ` .vue ` 文件时,所有该组件的实例会被替换, ** 并且不需要刷新页面 ** 。它甚至保持应用程序和被替换组件的当前状态 !当你调整模版或者修改样式时,这极大的提高了开发体验。
3
+ "热重载"不只是当你修改文件的时候简单重新加载页面 。启用热重载后,当你修改 ` .vue ` 文件时,该组件的所有实例将在 ** 不刷新页面 ** 的情况下被替换。它甚至保持了应用程序和被替换组件的当前状态 !当你调整模版或者修改样式时,这极大的提高了开发体验。
4
4
5
5
![ hot-reload] ( http://blog.evanyou.me/images/vue-hot.gif )
6
6
28
28
* webpack 会压缩代码
29
29
* ` process.env.NODE_ENV === 'production' `
30
30
31
- 你可以设置 ` hotReload: false ` 选项来显式关闭热重载 :
31
+ 你可以设置 ` hotReload: false ` 选项来显式地关闭热重载 :
32
32
33
33
``` js
34
34
module: {
Original file line number Diff line number Diff line change @@ -38,7 +38,7 @@ module.exports = {
38
38
}
39
39
```
40
40
41
- 额外的如果想 ` import 'style.scss' ` ,我们也可以在 Vue 组件中使用 SCSS:
41
+ 现在,除了能够 ` import 'style.scss' ` ,我们还可以在 Vue 组件中使用 SCSS:
42
42
43
43
``` html
44
44
<style lang =" scss" >
Original file line number Diff line number Diff line change @@ -33,7 +33,7 @@ module.exports = {
33
33
34
34
拿 ` <style lang="less"> ` 举例:在 v14 或更低版本中,它会尝试使用 ` less-loader ` 加载这个块,并在其后面隐式地链上 ` css-loader ` 和 ` vue-style-loader ` ,这一切都使用内联的 loader 字符串。
35
35
36
- 这 v15 中,` <style lang="less"> ` 会完成把它当作一个真实的 ` *.less ` 文件来加载。因此,为了这样处理它,你需要在你的主 webpack 配置中显式地提供一条规则:
36
+ 在 v15 中,` <style lang="less"> ` 会完成把它当作一个真实的 ` *.less ` 文件来加载。因此,为了这样处理它,你需要在你的主 webpack 配置中显式地提供一条规则:
37
37
38
38
``` js
39
39
{
@@ -242,7 +242,7 @@ externals: nodeExternals({
242
242
243
243
下列选项已经被改名了:
244
244
245
- - ` transformToRequire ` (现象改名为 ` transformAssetUrls ` )
245
+ - ` transformToRequire ` (现在改名为 ` transformAssetUrls ` )
246
246
247
247
下列选项已经被改为 ` resourceQuery ` :
248
248
Original file line number Diff line number Diff line change @@ -50,7 +50,7 @@ sidebar: auto
50
50
- 类型:` boolean `
51
51
- 默认值:当 webpack 配置中包含 ` target: 'node' ` 且 ` vue-template-compiler ` 版本号大于等于 2.4.0 时为 ` true ` 。
52
52
53
- 开启 Vue 2.4 服务端渲染的编译优化之后,渲染函数将会把返回的 vdom 树的一部分编译为字符串,以提升服务端渲染的性能。在一些情况下,你可能想要明确的将其关掉 ,因为该渲染函数只能用于服务端渲染,而不能用于客户端渲染或测试环境。
53
+ 开启 Vue 2.4 服务端渲染的编译优化之后,渲染函数将会把返回的 vdom 树的一部分编译为字符串,以提升服务端渲染的性能。在一些情况下,你可能想要明确地将其关掉 ,因为该渲染函数只能用于服务端渲染,而不能用于客户端渲染或测试环境。
54
54
55
55
## hotReload
56
56
Original file line number Diff line number Diff line change @@ -118,7 +118,7 @@ export default {
118
118
- [ Vim] ( https://github.com/posva/vim-vue )
119
119
- [ Emacs] ( https://github.com/AdamNiederer/vue-mode )
120
120
- [ Brackets] ( https://github.com/pandao/brackets-vue )
121
- - [ JetBrains IDEs] ( https://plugins.jetbrains.com/plugin/8057 ) (WebStorm, PhpStorm, etc )
121
+ - [ JetBrains IDEs] ( https://plugins.jetbrains.com/plugin/8057 ) (WebStorm, PhpStorm 等 )
122
122
123
123
非常感谢其他编辑器/IDE 所做的贡献!如果在 Vue 组件中没有使用任何预处理器,你可以把 ` .vue ` 文件当作 HTML 对待。
124
124
You can’t perform that action at this time.
0 commit comments