Unverified Commit 42497b3f authored by 勾三股四's avatar 勾三股四 Committed by GitHub

Merge pull request #1305 from Jinjiang/zh

[docs][zh] update
parents 01cf322a fc5b799c
...@@ -12,7 +12,7 @@ Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则 ...@@ -12,7 +12,7 @@ Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则
``` js ``` js
// webpack.config.js // webpack.config.js
const { VueLoaderPlugin } = require('vue-loader') const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = { module.exports = {
module: { module: {
...@@ -38,7 +38,7 @@ module.exports = { ...@@ -38,7 +38,7 @@ module.exports = {
``` js ``` js
// webpack.config.js // webpack.config.js
const path = require('path') const path = require('path')
const { VueLoaderPlugin } = require('vue-loader') const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = { module.exports = {
mode: 'development', mode: 'development',
......
...@@ -142,7 +142,7 @@ npm install -D postcss-loader ...@@ -142,7 +142,7 @@ npm install -D postcss-loader
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
'style-loader', 'vue-style-loader',
{ {
loader: 'css-loader', loader: 'css-loader',
options: { importLoaders: 1 } options: { importLoaders: 1 }
...@@ -172,6 +172,23 @@ npm install -D babel-core babel-loader ...@@ -172,6 +172,23 @@ npm install -D babel-core babel-loader
Babel 的配置可以通过 `.babelrc``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 ## TypeScript
``` bash ``` bash
......
...@@ -6,18 +6,18 @@ sidebarDepth: 2 ...@@ -6,18 +6,18 @@ sidebarDepth: 2
# 从 v14 迁移 # 从 v14 迁移
::: tip 注意 ::: 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 ``` js
// webpack.config.js // webpack.config.js
const { VueLoaderPlugin } = require('vue-loader') const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = { module.exports = {
// ... // ...
...@@ -29,7 +29,7 @@ module.exports = { ...@@ -29,7 +29,7 @@ module.exports = {
### Loader 推导 ### Loader 推导
现在 Vue Loader 15 使用了一个不一样的策略来推导语言块使用的 loader。 现在 Vue Loader v15 使用了一个不一样的策略来推导语言块使用的 loader。
`<style lang="less">` 举例:在 v14 或更低版本中,它会尝试使用 `less-loader` 加载这个块,并在其后面隐式地链上 `css-loader``vue-style-loader`,这一切都使用内联的 loader 字符串。 `<style lang="less">` 举例:在 v14 或更低版本中,它会尝试使用 `less-loader` 加载这个块,并在其后面隐式地链上 `css-loader``vue-style-loader`,这一切都使用内联的 loader 字符串。
...@@ -57,6 +57,23 @@ module.exports = { ...@@ -57,6 +57,23 @@ module.exports = {
v15 也允许为 loader 使用非序列化的选项,这种选项在之前的版本中是无法使用的。 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 为它们应用预处理器。 v14 或更低版本使用 [consolidate](https://github.com/tj/consolidate.js/) 来编译 `<template lang="xxx">`。v15 现在取而代之的是使用 webpack loader 为它们应用预处理器。
...@@ -244,10 +261,6 @@ externals: nodeExternals({ ...@@ -244,10 +261,6 @@ externals: nodeExternals({
- `transformToRequire` (现在改名为 `transformAssetUrls`) - `transformToRequire` (现在改名为 `transformAssetUrls`)
下列选项已经被改为 `resourceQuery`
- `shadowMode` (现在使用内联资源查询语句,例如 `foo.vue?shadow`)
:::tip :::tip
想查阅新选项的完整列表,请移步[选项参考](./options.md) 想查阅新选项的完整列表,请移步[选项参考](./options.md)
::: :::
...@@ -67,3 +67,10 @@ sidebar: auto ...@@ -67,3 +67,10 @@ sidebar: auto
- 默认值:`process.env.NODE_ENV === 'production'` - 默认值:`process.env.NODE_ENV === 'production'`
强制指定为生产环境,即禁止 loader 注入只在开发环境有效的代码 (例如 hot-reload 相关的代码)。 强制指定为生产环境,即禁止 loader 注入只在开发环境有效的代码 (例如 hot-reload 相关的代码)。
## shadowMode
- 类型:`boolean`
- 默认值:`false`
编译用于 Shadow DOM 内部的组件。在该模式下,组件的样式会被注入到 `this.$root.$options.shadowRoot`,而不是文档的 head 部分。
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