Skip to content

[docs][zh] update #1305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 24, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/zh/guide/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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',
Expand Down
19 changes: 18 additions & 1 deletion docs/zh/guide/pre-processors.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ npm install -D postcss-loader
{
test: /\.css$/,
use: [
'style-loader',
'vue-style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 }
Expand Down Expand Up @@ -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
Expand Down
29 changes: 21 additions & 8 deletions docs/zh/migrating.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 v15,所以如果你计划升级到 Vue CLI 3 的话,可能需要等待。
:::

## 值得注意的不兼容变更

### 现在你需要一个插件

Vue Loader 15 现在需要配合一个 webpack 插件才能正确使用:
Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用:

``` js
// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
// ...
Expand All @@ -29,7 +29,7 @@ module.exports = {

### Loader 推导

现在 Vue Loader 15 使用了一个不一样的策略来推导语言块使用的 loader。
现在 Vue Loader v15 使用了一个不一样的策略来推导语言块使用的 loader。

拿 `<style lang="less">` 举例:在 v14 或更低版本中,它会尝试使用 `less-loader` 加载这个块,并在其后面隐式地链上 `css-loader` 和 `vue-style-loader`,这一切都使用内联的 loader 字符串。

Expand Down Expand Up @@ -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 为它们应用预处理器。
Expand Down Expand Up @@ -244,10 +261,6 @@ externals: nodeExternals({

- `transformToRequire` (现在改名为 `transformAssetUrls`)

下列选项已经被改为 `resourceQuery`:

- `shadowMode` (现在使用内联资源查询语句,例如 `foo.vue?shadow`)

:::tip
想查阅新选项的完整列表,请移步[选项参考](./options.md)。
:::
7 changes: 7 additions & 0 deletions docs/zh/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,10 @@ sidebar: auto
- 默认值:`process.env.NODE_ENV === 'production'`

强制指定为生产环境,即禁止 loader 注入只在开发环境有效的代码 (例如 hot-reload 相关的代码)。

## shadowMode

- 类型:`boolean`
- 默认值:`false`

编译用于 Shadow DOM 内部的组件。在该模式下,组件的样式会被注入到 `this.$root.$options.shadowRoot`,而不是文档的 head 部分。