Skip to content

Commit

Permalink
[docs] typos (#1277)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jinjiang authored and yyx990803 committed May 4, 2018
1 parent 8045259 commit 0039fb9
Show file tree
Hide file tree
Showing 7 changed files with 39 additions and 30 deletions.
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 @@ -204,23 +204,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 @@ -250,7 +250,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 @@ -102,7 +102,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 @@ -158,13 +158,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 @@ -178,7 +178,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 @@ -203,7 +203,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 @@ -230,7 +230,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 @@ -261,7 +261,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

0 comments on commit 0039fb9

Please sign in to comment.