Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
V
vue-loader
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
pi-plusplus
fork-from-github
vue-loader
Commits
bf328238
Commit
bf328238
authored
May 06, 2018
by
Jinjiang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[docs][zh] small tweaks
parent
234c3b00
Changes
11
Show whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
18 additions
and
18 deletions
+18
-18
asset-url.md
docs/guide/asset-url.md
+1
-1
README.md
docs/zh/README.md
+1
-1
asset-url.md
docs/zh/guide/asset-url.md
+6
-6
custom-blocks.md
docs/zh/guide/custom-blocks.md
+1
-1
extract-css.md
docs/zh/guide/extract-css.md
+1
-1
functional.md
docs/zh/guide/functional.md
+1
-1
hot-reload.md
docs/zh/guide/hot-reload.md
+2
-2
pre-processors.md
docs/zh/guide/pre-processors.md
+1
-1
migrating.md
docs/zh/migrating.md
+2
-2
options.md
docs/zh/options.md
+1
-1
spec.md
docs/zh/spec.md
+1
-1
No files found.
docs/guide/asset-url.md
View file @
bf328238
...
@@ -2,7 +2,7 @@
...
@@ -2,7 +2,7 @@
When Vue Loader compiles the
`<template>`
blocks in SFCs, it also converts any encountered asset URLs into
**webpack module requests**
.
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
```
vue
<img
src=
"../image.png"
>
<img
src=
"../image.png"
>
...
...
docs/zh/README.md
View file @
bf328238
# 介绍
# 介绍
:::tip 版本注明
:::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 是什么?
...
...
docs/zh/guide/asset-url.md
View file @
bf328238
# 处理资源路径
# 处理资源路径
当 Vue Loader 编译单文件组件中的
`<template>`
块时,它也会将所有遇到的资源 URL
URL
转换为
**webpack 模块请求**
。
当 Vue Loader 编译单文件组件中的
`<template>`
块时,它也会将所有遇到的资源 URL 转换为
**webpack 模块请求**
。
例如,下面的模板代码片段
例如,下面的模板代码片段
:
```
vue
```
vue
<img
src=
"../image.png"
>
<img
src=
"../image.png"
>
...
@@ -20,7 +20,7 @@ createElement('img', {
...
@@ -20,7 +20,7 @@ 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 也会被同等处理。
## 转换规则
## 转换规则
...
@@ -40,12 +40,12 @@ createElement('img', {
...
@@ -40,12 +40,12 @@ createElement('img', {
## 相关的 Loader
## 相关的 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 的好处是:
转换资源 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`
处理。
docs/zh/guide/custom-blocks.md
View file @
bf328238
...
@@ -21,7 +21,7 @@
...
@@ -21,7 +21,7 @@
如果找到了一个自定义块的匹配规则,它将会被处理,否则该自定义块会被默默忽略。
如果找到了一个自定义块的匹配规则,它将会被处理,否则该自定义块会被默默忽略。
额外的
,如果这个自定义块被所有匹配的 loader 处理之后导出一个函数作为最终结果,则这个
`*.vue`
文件的组件会作为一个参数被这个函数调用。
此外
,如果这个自定义块被所有匹配的 loader 处理之后导出一个函数作为最终结果,则这个
`*.vue`
文件的组件会作为一个参数被这个函数调用。
## Example
## Example
...
...
docs/zh/guide/extract-css.md
View file @
bf328238
# CSS 提取
# CSS 提取
:::tip 提示
:::tip 提示
只有生产环境才会运
用 CSS 提取,这有便于你在开发环境下进行热重载。
请只在生产环境下使
用 CSS 提取,这有便于你在开发环境下进行热重载。
:::
:::
## webpack 4
## webpack 4
...
...
docs/zh/guide/functional.md
View file @
bf328238
# 函数式组件
# 函数式组件
在一个
`*.vue`
文件中以单文件形式定义的函数式组件,现在
在
模板编译、scoped CSS 和热重载也有了良好的支持。
在一个
`*.vue`
文件中以单文件形式定义的函数式组件,现在
对于
模板编译、scoped CSS 和热重载也有了良好的支持。
要声明一个应该编译为函数式组件的模板,请将
`functional`
特性添加到模板块中。这样做以后就可以省略
`<script>`
块中的
`functional`
选项。
要声明一个应该编译为函数式组件的模板,请将
`functional`
特性添加到模板块中。这样做以后就可以省略
`<script>`
块中的
`functional`
选项。
...
...
docs/zh/guide/hot-reload.md
View file @
bf328238
# 热重载
# 热重载
"热重载"不
是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改
`.vue`
文件时,所有该组件的实例会被替换,
**并且不需要刷新页面**
。它甚至保持
应用程序和被替换组件的当前状态!当你调整模版或者修改样式时,这极大的提高了开发体验。
"热重载"不
只是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改
`.vue`
文件时,该组件的所有实例将在
**不刷新页面**
的情况下被替换。它甚至保持了
应用程序和被替换组件的当前状态!当你调整模版或者修改样式时,这极大的提高了开发体验。


...
@@ -28,7 +28,7 @@
...
@@ -28,7 +28,7 @@
*
webpack 会压缩代码
*
webpack 会压缩代码
*
`process.env.NODE_ENV === 'production'`
*
`process.env.NODE_ENV === 'production'`
你可以设置
`hotReload: false`
选项来显式关闭热重载:
你可以设置
`hotReload: false`
选项来显式
地
关闭热重载:
```
js
```
js
module
:
{
module
:
{
...
...
docs/zh/guide/pre-processors.md
View file @
bf328238
...
@@ -38,7 +38,7 @@ module.exports = {
...
@@ -38,7 +38,7 @@ module.exports = {
}
}
```
```
额外的如果想
`import 'style.scss'`
,我们也
可以在 Vue 组件中使用 SCSS:
现在,除了能够
`import 'style.scss'`
,我们还
可以在 Vue 组件中使用 SCSS:
```
html
```
html
<style
lang=
"scss"
>
<style
lang=
"scss"
>
...
...
docs/zh/migrating.md
View file @
bf328238
...
@@ -33,7 +33,7 @@ module.exports = {
...
@@ -33,7 +33,7 @@ module.exports = {
拿
`<style lang="less">`
举例:在 v14 或更低版本中,它会尝试使用
`less-loader`
加载这个块,并在其后面隐式地链上
`css-loader`
和
`vue-style-loader`
,这一切都使用内联的 loader 字符串。
拿
`<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
```
js
{
{
...
@@ -242,7 +242,7 @@ externals: nodeExternals({
...
@@ -242,7 +242,7 @@ externals: nodeExternals({
下列选项已经被改名了:
下列选项已经被改名了:
-
`transformToRequire`
(现
象
改名为
`transformAssetUrls`
)
-
`transformToRequire`
(现
在
改名为
`transformAssetUrls`
)
下列选项已经被改为
`resourceQuery`
:
下列选项已经被改为
`resourceQuery`
:
...
...
docs/zh/options.md
View file @
bf328238
...
@@ -50,7 +50,7 @@ sidebar: auto
...
@@ -50,7 +50,7 @@ sidebar: auto
-
类型:
`boolean`
-
类型:
`boolean`
-
默认值:当 webpack 配置中包含
`target: 'node'`
且
`vue-template-compiler`
版本号大于等于 2.4.0 时为
`true`
。
-
默认值:当 webpack 配置中包含
`target: 'node'`
且
`vue-template-compiler`
版本号大于等于 2.4.0 时为
`true`
。
开启 Vue 2.4 服务端渲染的编译优化之后,渲染函数将会把返回的 vdom 树的一部分编译为字符串,以提升服务端渲染的性能。在一些情况下,你可能想要明确
的
将其关掉,因为该渲染函数只能用于服务端渲染,而不能用于客户端渲染或测试环境。
开启 Vue 2.4 服务端渲染的编译优化之后,渲染函数将会把返回的 vdom 树的一部分编译为字符串,以提升服务端渲染的性能。在一些情况下,你可能想要明确
地
将其关掉,因为该渲染函数只能用于服务端渲染,而不能用于客户端渲染或测试环境。
## hotReload
## hotReload
...
...
docs/zh/spec.md
View file @
bf328238
...
@@ -118,7 +118,7 @@ export default {
...
@@ -118,7 +118,7 @@ export default {
-
[
Vim
](
https://github.com/posva/vim-vue
)
-
[
Vim
](
https://github.com/posva/vim-vue
)
-
[
Emacs
](
https://github.com/AdamNiederer/vue-mode
)
-
[
Emacs
](
https://github.com/AdamNiederer/vue-mode
)
-
[
Brackets
](
https://github.com/pandao/brackets-vue
)
-
[
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 对待。
非常感谢其他编辑器/IDE 所做的贡献!如果在 Vue 组件中没有使用任何预处理器,你可以把
`.vue`
文件当作 HTML 对待。
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment