-
Notifications
You must be signed in to change notification settings - Fork 918
[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
[docs][zh] update #1305
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 单文件组件,你需要通过替换使用一个排除函数将其设为白名单: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 将它们加入白名单 |
||
|
||
``` js | ||
{ | ||
test: /\.js$/, | ||
loader: 'babel-loader', | ||
exclude: file => ( | ||
/node_modules/.test(file) && | ||
!/\.vue\.js/.test(file) | ||
) | ||
} | ||
``` | ||
|
||
## TypeScript | ||
|
||
``` bash | ||
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 = { | ||
// ... | ||
|
@@ -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 字符串。 | ||
|
||
|
@@ -57,6 +57,23 @@ module.exports = { | |
|
||
v15 也允许为 loader 使用非序列化的选项,这种选项在之前的版本中是无法使用的。 | ||
|
||
### 从依赖中导入单文件组件 | ||
|
||
`exclude: /node_modules/` 在运用于 `.js` 文件的 JS 转译规则 (例如 `babel-loader`) 中是蛮常见的。鉴于 v15 中的推导变化,如果你导入一个 `node_modules` 内的 Vue 单文件组件,它的 `<script>` 部分在转译时将会被排除在外。 | ||
|
||
为了确保 JS 的转译应用到 `node_modules` 的 Vue 单文件组件,你需要通过替换使用一个排除函数将其设为白名单: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 同上 |
||
|
||
``` 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)。 | ||
::: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
应用?