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
8c4daf7a
Commit
8c4daf7a
authored
May 05, 2018
by
Jinjiang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[docs][zh] fixed scoped & assets
parent
10f9ef2d
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
17 additions
and
17 deletions
+17
-17
README.md
docs/zh/README.md
+2
-2
asset-url.md
docs/zh/guide/asset-url.md
+5
-5
css-modules.md
docs/zh/guide/css-modules.md
+1
-1
functional.md
docs/zh/guide/functional.md
+1
-1
scoped-css.md
docs/zh/guide/scoped-css.md
+5
-5
options.md
docs/zh/options.md
+1
-1
spec.md
docs/zh/spec.md
+2
-2
No files found.
docs/zh/README.md
View file @
8c4daf7a
...
@@ -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 应用的、现代的、灵活的和极致强大的前端工作流。
docs/zh/guide/asset-url.md
View file @
8c4daf7a
# 处理资
产
路径
# 处理资
源
路径
当 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。
...
...
docs/zh/guide/css-modules.md
View file @
8c4daf7a
# 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
的替代方案。
## 用法
## 用法
...
...
docs/zh/guide/functional.md
View file @
8c4daf7a
# 函数式组件
# 函数式组件
在一个
`*.vue`
文件中以单文件形式定义的函数式组件,现在在模板编译、
有作用域的
CSS 和热重载也有了良好的支持。
在一个
`*.vue`
文件中以单文件形式定义的函数式组件,现在在模板编译、
scoped
CSS 和热重载也有了良好的支持。
要声明一个应该编译为函数式组件的模板,请将
`functional`
特性添加到模板块中。这样做以后就可以省略
`<script>`
块中的
`functional`
选项。
要声明一个应该编译为函数式组件的模板,请将
`functional`
特性添加到模板块中。这样做以后就可以省略
`<script>`
块中的
`functional`
选项。
...
...
docs/zh/guide/scoped-css.md
View file @
8c4daf7a
#
有作用域的
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`
都将被这个规则匹配。
docs/zh/options.md
View file @
8c4daf7a
...
@@ -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
...
...
docs/zh/spec.md
View file @
8c4daf7a
...
@@ -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 -->
...
...
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