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
42497b3f
Unverified
Commit
42497b3f
authored
May 24, 2018
by
勾三股四
Committed by
GitHub
May 24, 2018
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #1305 from Jinjiang/zh
[docs][zh] update
parents
01cf322a
fc5b799c
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
48 additions
and
11 deletions
+48
-11
README.md
docs/zh/guide/README.md
+2
-2
pre-processors.md
docs/zh/guide/pre-processors.md
+18
-1
migrating.md
docs/zh/migrating.md
+21
-8
options.md
docs/zh/options.md
+7
-0
No files found.
docs/zh/guide/README.md
View file @
42497b3f
...
...
@@ -12,7 +12,7 @@ Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则
```
js
// webpack.config.js
const
{
VueLoaderPlugin
}
=
require
(
'vue-loader
'
)
const
VueLoaderPlugin
=
require
(
'vue-loader/lib/plugin
'
)
module
.
exports
=
{
module
:
{
...
...
@@ -38,7 +38,7 @@ module.exports = {
```
js
// webpack.config.js
const
path
=
require
(
'path'
)
const
{
VueLoaderPlugin
}
=
require
(
'vue-loader
'
)
const
VueLoaderPlugin
=
require
(
'vue-loader/lib/plugin
'
)
module
.
exports
=
{
mode
:
'development'
,
...
...
docs/zh/guide/pre-processors.md
View file @
42497b3f
...
...
@@ -142,7 +142,7 @@ npm install -D postcss-loader
{
test
:
/
\.
css$/
,
use
:
[
'style-loader'
,
'
vue-
style-loader'
,
{
loader
:
'css-loader'
,
options
:
{
importLoaders
:
1
}
...
...
@@ -172,6 +172,23 @@ npm install -D babel-core babel-loader
Babel 的配置可以通过
`.babelrc`
或
`babel-loader`
选项来完成。
### 排除 node_modules
`exclude: /node_modules/`
在应用于
`.js`
文件的 JS 转译规则 (例如
`babel-loader`
) 中是蛮常见的。鉴于 v15 中的推导变化,如果你导入一个
`node_modules`
内的 Vue 单文件组件,它的
`<script>`
部分在转译时将会被排除在外。
为了确保 JS 的转译应用到
`node_modules`
的 Vue 单文件组件,你需要通过使用一个排除函数将它们加入白名单:
```
js
{
test
:
/
\.
js$/
,
loader
:
'babel-loader'
,
exclude
:
file
=>
(
/node_modules/
.
test
(
file
)
&&
!
/
\.
vue
\.
js/
.
test
(
file
)
)
}
```
## TypeScript
```
bash
...
...
docs/zh/migrating.md
View file @
42497b3f
...
...
@@ -6,18 +6,18 @@ sidebarDepth: 2
# 从 v14 迁移
::: tip 注意
我们正在升级 Vue CLI 3 beta 的过程中,并使用了 webpack 4 + Vue Loader 15,所以如果你计划升级到 Vue CLI 3 的话,可能需要等待。
我们正在升级 Vue CLI 3 beta 的过程中,并使用了 webpack 4 + Vue Loader
v
15,所以如果你计划升级到 Vue CLI 3 的话,可能需要等待。
:::
## 值得注意的不兼容变更
### 现在你需要一个插件
Vue Loader 15 现在需要配合一个 webpack 插件才能正确使用:
Vue Loader
v
15 现在需要配合一个 webpack 插件才能正确使用:
```
js
// webpack.config.js
const
{
VueLoaderPlugin
}
=
require
(
'vue-loader
'
)
const
VueLoaderPlugin
=
require
(
'vue-loader/lib/plugin
'
)
module
.
exports
=
{
// ...
...
...
@@ -29,7 +29,7 @@ module.exports = {
### Loader 推导
现在 Vue Loader 15 使用了一个不一样的策略来推导语言块使用的 loader。
现在 Vue Loader
v
15 使用了一个不一样的策略来推导语言块使用的 loader。
拿
`<style lang="less">`
举例:在 v14 或更低版本中,它会尝试使用
`less-loader`
加载这个块,并在其后面隐式地链上
`css-loader`
和
`vue-style-loader`
,这一切都使用内联的 loader 字符串。
...
...
@@ -57,6 +57,23 @@ module.exports = {
v15 也允许为 loader 使用非序列化的选项,这种选项在之前的版本中是无法使用的。
### 从依赖中导入单文件组件
`exclude: /node_modules/`
在运用于
`.js`
文件的 JS 转译规则 (例如
`babel-loader`
) 中是蛮常见的。鉴于 v15 中的推导变化,如果你导入一个
`node_modules`
内的 Vue 单文件组件,它的
`<script>`
部分在转译时将会被排除在外。
为了确保 JS 的转译应用到
`node_modules`
的 Vue 单文件组件,你需要通过使用一个排除函数将它们加入白名单:
```
js
{
test
:
/
\.
js$/
,
loader
:
'babel-loader'
,
exclude
:
file
=>
(
/node_modules/
.
test
(
file
)
&&
!
/
\.
vue
\.
js/
.
test
(
file
)
)
}
```
### 模板预处理
v14 或更低版本使用
[
consolidate
](
https://github.com/tj/consolidate.js/
)
来编译
`<template lang="xxx">`
。v15 现在取而代之的是使用 webpack loader 为它们应用预处理器。
...
...
@@ -244,10 +261,6 @@ externals: nodeExternals({
-
`transformToRequire`
(现在改名为
`transformAssetUrls`
)
下列选项已经被改为
`resourceQuery`
:
-
`shadowMode`
(现在使用内联资源查询语句,例如
`foo.vue?shadow`
)
:::tip
想查阅新选项的完整列表,请移步
[
选项参考
](
./options.md
)
。
:::
docs/zh/options.md
View file @
42497b3f
...
...
@@ -67,3 +67,10 @@ sidebar: auto
-
默认值:
`process.env.NODE_ENV === 'production'`
强制指定为生产环境,即禁止 loader 注入只在开发环境有效的代码 (例如 hot-reload 相关的代码)。
## shadowMode
-
类型:
`boolean`
-
默认值:
`false`
编译用于 Shadow DOM 内部的组件。在该模式下,组件的样式会被注入到
`this.$root.$options.shadowRoot`
,而不是文档的 head 部分。
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