Commit bf328238 authored by Jinjiang's avatar Jinjiang

[docs][zh] small tweaks

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