Skip to content

[docs] typos #1277

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 4, 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
8 changes: 4 additions & 4 deletions docs/guide/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,14 @@ module.exports = {
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain .js files
// AND <script> blocks in vue files
// this will apply to both plain `.js` files
// AND `<script>` blocks in `.vue` files
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain .css files
// AND <style> blocks in vue files
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
Expand Down
9 changes: 9 additions & 0 deletions docs/guide/asset-url.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,15 @@ createElement('img', {

By default the following tag/attribute combinations are transformed, and can be configured using the [transformAssetUrls](../options.md#transformasseturls) option.

``` js
{
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
```

In addition, if you have configured to use [css-loader](https://github.com/webpack-contrib/css-loader) for the `<style>` blocks, asset URLs in your CSS will also be processed in a similar fashion.

## Transform Rules
Expand Down
6 changes: 3 additions & 3 deletions docs/guide/css-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,14 @@ Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for

## Opt-in Usage

If you only want to use CSS Modules in some of your Vue components, you can use a `oneOf` rule and check for the `module` string in resourceQuery:
If you only want to use CSS Modules in some of your Vue components, you can use a `oneOf` rule and check for the `module` string in `resourceQuery`:

``` js
// webpack.config.js -> module.rules
{
test: /\.css$/,
oneOf: [
// this matches <style module>
// this matches `<style module>`
{
resourceQuery: /module/,
use: [
Expand All @@ -109,7 +109,7 @@ If you only want to use CSS Modules in some of your Vue components, you can use
}
]
},
// this matches plain <style> or <style scoped>
// this matches plain `<style>` or `<style scoped>`
{
use: [
'vue-style-loader',
Expand Down
8 changes: 4 additions & 4 deletions docs/guide/extract-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ module.exports = {
// other options...
module: {
rules: [
// ...other rules omitted
// ... other rules omitted
{
test: /\.css$/,
use: [
Expand All @@ -31,7 +31,7 @@ module.exports = {
]
},
plugins: [
// ...vue-loader plugin omitted
// ... Vue Loader plugin omitted
new MiniCssExtractPlugin({
filename: style.css
})
Expand All @@ -55,7 +55,7 @@ module.exports = {
// other options...
module: {
rules: [
// ...other rules omitted
// ... other rules omitted
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
Expand All @@ -66,7 +66,7 @@ module.exports = {
]
},
plugins: [
// ...vue-loader plugin omitted
// ... Vue Loader plugin omitted
new ExtractTextPlugin("style.css")
]
}
Expand Down
14 changes: 7 additions & 7 deletions docs/guide/pre-processors.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ In your webpack config:
module.exports = {
module: {
rules: [
// ...other rules omitted
// ... other rules omitted

// this will apply to both plain .scss files
// AND <style lang="scss"> blocks in vue files
// this will apply to both plain `.scss` files
// AND `<style lang="scss">` blocks in `.vue` files
{
test: /\.scss$/,
use: [
Expand Down Expand Up @@ -187,23 +187,23 @@ module.exports = {
},
module: {
rules: [
// ...other rules omitted
// ... other rules omitted
{
test: /\.ts$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] }
}
]
},
// ...plugin omitted
// ... plugin omitted
}
```

Configuration of TypeScipt can be done via `tsconfig.json`. Also see docs for [ts-loader](https://github.com/TypeStrong/ts-loader).

## Pug

Processing templates is a little different, because most webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we need to use a loader that returns the raw HTML string instead, e.g. `pug-plain-loader`:
Processing templates is a little different, because most webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we need to use a loader that returns the raw HTML string, e.g. `pug-plain-loader`:

``` bash
npm install -D pug pug-plain-loader
Expand Down Expand Up @@ -233,7 +233,7 @@ If you also intend to use it to import `.pug` files as HTML strings in JavaScrip
{
test: /\.pug$/,
oneOf: [
// this applies to <template lang="pug"> in Vue components
// this applies to `<template lang="pug">` in Vue components
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
Expand Down
22 changes: 11 additions & 11 deletions docs/migrating.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ sidebarDepth: 2
# Migrating from v14

::: tip Heads Up
We are in the process of upgrading Vue CLI 3 beta to use webpack 4 + Vue Loader 15, so you might want to wait if you are planning to upgrade to Vue CLI 3.
We are in the process of upgrading Vue CLI 3 beta to use webpack 4 + Vue Loader v15, so you might want to wait if you are planning to upgrade to Vue CLI 3.
:::

## Notable Breaking Changes

### A Plugin is Now Required

Vue Loader 15 now requires an accompanying webpack plugin to function properly:
Vue Loader v15 now requires an accompanying webpack plugin to function properly:

``` js
// webpack.config.js
Expand All @@ -29,7 +29,7 @@ module.exports = {

### Loader Inference

Vue Loader 15 now uses a different strategy to infer loaders to use for language blocks.
Vue Loader v15 now uses a different strategy to infer loaders to use for language blocks.

Take `<style lang="less">` as an example: in v14 and below, it will attempt to load the block with `less-loader`, and implicitly chains `css-loader` and `vue-style-loader` after it, all using inline loader strings.

Expand All @@ -39,7 +39,7 @@ In v15, `<style lang="less">` will behave as if it's an actual `*.less` file bei
{
module: {
rules: [
// ...other rules
// ... other rules
{
test: /\.less$/,
use: [
Expand Down Expand Up @@ -85,7 +85,7 @@ If you also intend to use it to import `.pug` files as HTML strings in JavaScrip
{
test: /\.pug$/,
oneOf: [
// this applies to <template lang="pug"> in Vue components
// this applies to `<template lang="pug">` in Vue components
{
resourceQuery: /^\?vue/,
use: ['pug-plain-loader']
Expand Down Expand Up @@ -141,13 +141,13 @@ The good news is that you can now configure `localIdentName` in one place:
}
```

If you only want to use CSS Modules in some of your Vue components, you can use a `oneOf` rule and check for the `module` string in resourceQuery:
If you only want to use CSS Modules in some of your Vue components, you can use a `oneOf` rule and check for the `module` string in `resourceQuery`:

``` js
{
test: /\.css$/,
oneOf: [
// this matches <style module>
// this matches `<style module>`
{
resourceQuery: /module/,
use: [
Expand All @@ -161,7 +161,7 @@ If you only want to use CSS Modules in some of your Vue components, you can use
}
]
},
// this matches plain <style> or <style scoped>
// this matches plain `<style>` or `<style scoped>`
{
use: [
'vue-style-loader',
Expand All @@ -186,7 +186,7 @@ Works the same way as you'd configure it for normal CSS. Example usage with [min
},
{
test: /\.css$/,
// or ExtractTextWebpackPlugin.extract(...)
// or `ExtractTextWebpackPlugin.extract(...)`
use: [
MiniCssExtractPlugin.loader,
'css-loader'
Expand All @@ -213,7 +213,7 @@ externals: nodeExternals({
})
```

With v15, imports for `<style src="dep/foo.css">` now has resourceQuery strings appended at the end of the request, so you need to update the above to:
With v15, imports for `<style src="dep/foo.css">` now has `resourceQuery` strings appended at the end of the request, so you need to update the above to:

``` js
externals: nodeExternals({
Expand Down Expand Up @@ -244,7 +244,7 @@ The following option has been renamed:

- `transformToRequire` (now renamed to `transformAssetUrls`)

The following option has been changed to resourceQuery:
The following option has been changed to `resourceQuery`:

- `shadowMode` (now use inline resource queries, e.g. `foo.vue?shadow`)

Expand Down
2 changes: 1 addition & 1 deletion docs/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ sidebar: auto

Configure ES2015+ to ES5 transpiling options for the generated render function code. The [transpiler](https://github.com/vuejs/vue-template-es2015-compiler) is a fork of [Buble](https://github.com/Rich-Harris/buble), so consult the available options [here](https://buble.surge.sh/guide/#using-the-javascript-api).

The template render functions compilation supports a special transform `stripWith` (enabled by default), which removes the `with` usage in generated render functions to make them strict-mode compliant. This is enabled by default.
The template render functions compilation supports a special transform `stripWith` (enabled by default), which removes the `with` usage in generated render functions to make them strict-mode compliant.

## optimizeSSR

Expand Down