+
+
+
+
+```
diff --git a/docs/en/configurations/extract-css.md b/docs/en/configurations/extract-css.md
new file mode 100644
index 000000000..f40b2c017
--- /dev/null
+++ b/docs/en/configurations/extract-css.md
@@ -0,0 +1,104 @@
+# Extracting CSS into a Single File
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## The Easy Way
+
+> requires vue-loader@^12.0.0 and webpack@^2.0.0
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // other options...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+The above will automatically handle extraction for `
+```
+
+Under the hood, the text content inside the `
+```
+
+However, note this makes your Vue component Webpack-specific and not compatible with Browserify and [vueify](https://github.com/vuejs/vueify). **If you intend to ship your Vue component as a reusable 3rd-party component, avoid using this syntax.**
diff --git a/docs/en/features/css-modules.md b/docs/en/features/css-modules.md
new file mode 100644
index 000000000..af9fb3d66
--- /dev/null
+++ b/docs/en/features/css-modules.md
@@ -0,0 +1,117 @@
+# CSS Modules
+
+> requires ^9.8.0
+
+[CSS Modules](https://github.com/css-modules/css-modules) is a popular system for modularizing and composing CSS. `vue-loader` provides first-class integration with CSS Modules as an alternative for simulated scoped CSS.
+
+### Usage
+
+Just add the `module` attribute to your `
+```
+
+This will turn on CSS Modules mode for `css-loader`, and the resulting class identifier object will be injected into the component as a computed property with the name `$style`. You can use it in your templates with a dynamic class binding:
+
+``` html
+
+ {{ docs }}
++ This should be red +
+ +``` + +Since it's a computed property, it also works with the object/array syntax of `:class`: + +``` html + +
+
+
+```
+
+And you can also access it from JavaScript:
+
+``` html
+
+```
+
+Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for mode details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
+
+### Custom Inject Name
+
+You can have more than one `
+
+
+```
+
+### Configuring `css-loader` Query
+
+CSS Modules are processed via [css-loader](https://github.com/webpack/css-loader). With `
+
+
+ + Am I red? +
++ Red and bold +
+hi
+
+```
+
+Into the following:
+
+``` html
+
+
+
+ hi
+
+```
+
+#### Notes
+
+1. You can include both scoped and non-scoped styles in the same component:
+
+ ``` html
+
+
+
+ ```
+
+2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
+
+3. Partials are not affected by scoped styles.
+
+4. **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit. [Here's a playground](http://stevesouders.com/efws/css-selectors/csscreate.php) where you can test the differences yourself.
+
+5. **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule.
diff --git a/docs/en/options.md b/docs/en/options.md
new file mode 100644
index 000000000..dcb2ad3dd
--- /dev/null
+++ b/docs/en/options.md
@@ -0,0 +1,260 @@
+# Options Reference
+
+## Usage Difference Between Webpack 1 & 2
+
+For Webpack 2: pass the options directly to the loader rule.
+
+``` js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // vue-loader options
+ }
+ }
+ ]
+ }
+}
+```
+
+For Webpack 1.x: add a root `vue` block in your Webpack config.
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // vue-loader options
+ }
+}
+```
+
+### loaders
+
+- type: `{ [lang: string]: string }`
+
+ An object specifying Webpack loaders to overwrite the default loaders used for language blocks inside `*.vue` files. The key corresponds to the `lang` attribute for language blocks, if specified. The default `lang` for each type is:
+
+ - ``: `html`
+ - `
+
+
+
+- This should be red -
- -``` - -Since it's a computed property, it also works with the object/array syntax of `:class`: - -``` vue - -
-
-
-```
-
-And you can also access it from JavaScript:
-
-``` vue
-
-```
-
-Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for mode details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
-
-## 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`:
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.css$/,
- oneOf: [
- // this matches `
-
-
-```
diff --git a/docs/guide/custom-blocks.md b/docs/guide/custom-blocks.md
deleted file mode 100644
index f34c18317..000000000
--- a/docs/guide/custom-blocks.md
+++ /dev/null
@@ -1,96 +0,0 @@
-# Custom Blocks
-
-You can define custom language blocks inside `*.vue` files. Loaders applied for a custom block are matched based on the `lang` attribute of the block, the block's tag name, and the rules in your webpack config.
-
-If a `lang` attribute is specified, the custom block will be matched as a file with the `lang` as its extension.
-
-You can also use `resourceQuery` to match a rule against a custom block with no `lang`. For example, to match against `- Am I red? -
-- Red and bold -
-Hello
-
-
-
-
-
-
-
-```
diff --git a/docs/guide/extract-css.md b/docs/guide/extract-css.md
deleted file mode 100644
index 7557392b7..000000000
--- a/docs/guide/extract-css.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# CSS Extraction
-
-::: tip
-Only apply CSS extraction for production so that you get CSS hot reload during development.
-:::
-
-## webpack 4
-
-``` bash
-npm install -D mini-css-extract-plugin
-```
-
-``` js
-// webpack.config.js
-var MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-module.exports = {
- // other options...
- module: {
- rules: [
- // ... other rules omitted
- {
- test: /\.css$/,
- use: [
- process.env.NODE_ENV !== 'production'
- ? 'vue-style-loader'
- : MiniCssExtractPlugin.loader,
- 'css-loader'
- ]
- }
- ]
- },
- plugins: [
- // ... Vue Loader plugin omitted
- new MiniCssExtractPlugin({
- filename: 'style.css'
- })
- ]
-}
-```
-
-Also see [mini-css-extract-plugin docs](https://github.com/webpack-contrib/mini-css-extract-plugin).
-
-## webpack 3
-
-``` bash
-npm install -D extract-text-webpack-plugin
-```
-
-``` js
-// webpack.config.js
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
-
-module.exports = {
- // other options...
- module: {
- rules: [
- // ... other rules omitted
- {
- test: /\.css$/,
- loader: ExtractTextPlugin.extract({
- use: 'css-loader',
- fallback: 'vue-style-loader'
- })
- }
- ]
- },
- plugins: [
- // ... Vue Loader plugin omitted
- new ExtractTextPlugin("style.css")
- ]
-}
-```
-
-Also see [extract-text-webpack-plugin docs](https://github.com/webpack-contrib/extract-text-webpack-plugin).
diff --git a/docs/guide/functional.md b/docs/guide/functional.md
deleted file mode 100644
index afbdfb7a4..000000000
--- a/docs/guide/functional.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Functional Components
-
-Functional components defined as a Single-File Component in a `*.vue` file also receives proper template compilation, Scoped CSS and hot-reloading support.
-
-To denote a template that should be compiled as a functional component, add the `functional` attribute to the template block. This also allows omitting the `functional` option in the `
+
+
+```
+
+#### webpack.config.js
+
+``` js
+// Webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue',
+ options: {
+ loaders: {
+ // 全ての {{ docs }}
-
+
+
+
+
+```
diff --git a/docs/ja/configurations/extract-css.md b/docs/ja/configurations/extract-css.md
new file mode 100644
index 000000000..e166a56a8
--- /dev/null
+++ b/docs/ja/configurations/extract-css.md
@@ -0,0 +1,103 @@
+# CSS を単一のファイルに抽出する
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## 簡単な方法
+
+> vue-loader@^12.0.0 と webpack@^2.0.0 必須
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // 他のオプション...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+上記は、`*.vue` ファイル内部の `
+```
+
+ `
+```
+
+ただこれにより Vue コンポーネントが Webpack 固有となり Browserify および [vueify](https://github.com/vuejs/vueify) と互換性がなくなります。 **Vue コンポーネントを再利用可能なサードパーティコンポーネントとして提供する場合は、この構文を使用しないでください。**
diff --git a/docs/ja/features/css-modules.md b/docs/ja/features/css-modules.md
new file mode 100644
index 000000000..380bc2839
--- /dev/null
+++ b/docs/ja/features/css-modules.md
@@ -0,0 +1,117 @@
+# CSS モジュール
+
+> バージョン ^9.8.0 が必要
+
+[CSS モジュール](https://github.com/css-modules/css-modules) は CSS をモジュール化して構成するための一般的なシステムです。`vue-loader` はシミュレートされたスコープ付き CSS の代わりに CSS モジュールの一流の統合を提供します。
+
+### 使い方
+
+`module` 属性を `
+```
+
+`css-loader` の CSS モジュールモードを有効にし、その結果クラス識別子オブジェクトは `$style` という名前の算出プロパティとしてコンポーネントに注入されます。ダイナミッククラスバインディングを利用してテンプレートで使用可能になります。
+
+``` html
+
+ {{ docs }}
++ This should be red +
+ +``` + +これは算出プロパティなので、`:class` の オブジェクト / 配列構文でも動作します: + +``` html + +
+
+
+```
+
+そして JavaScript からもアクセス可能です:
+
+``` html
+
+```
+
+[CSS Modules spec](https://github.com/css-modules/css-modules) を参照してください。モードの詳細については [global exceptions](https://github.com/css-modules/css-modules#exceptions) と [composition](https://github.com/css-modules/css-modules#composition)を参照してください。
+
+### カスタム注入名
+
+単一の `*.vue` コンポーネントは複数の `
+
+
+```
+
+### `css-loader` クエリの設定
+
+CSS モジュールは [css-loader](https://github.com/webpack/css-loader) によって処理されます。`
+
+
+ + Am I red? +
++ Red and bold +
+hi
+
+```
+
+以下の通りになります:
+
+``` html
+
+
+
+ hi
+
+```
+
+#### 注意
+
+1. 同じコンポーネント内にスコープで区切られてものとそうでないスタイルを含むことが出来ます：
+
+ ``` html
+
+
+
+ ```
+
+2. 子コンポーネントのルートノードは親のスコープの CSS と子のスコープの CSS の両方の影響をうけます。
+
+3. パーシャルはスコープ付きスタイルの影響をうけません。
+
+4. **スコープされたスタイルは class の必要性を排除しません**。ブラウザが様々な CSS セレクタをレンダリングするため、`p { color: red }` はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし `.example { color: red }` のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。[この例](http://stevesouders.com/efws/css-selectors/csscreate.php)で違いをテストすることが出来ます。
+
+5. **再帰されたコンポーネントの子孫セレクタには気をつけてください！** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。
diff --git a/docs/ja/options.md b/docs/ja/options.md
new file mode 100644
index 000000000..722ce1bd0
--- /dev/null
+++ b/docs/ja/options.md
@@ -0,0 +1,260 @@
+# オプションリファレンス
+
+## Webpack 1 と 2 の使い方の違い
+
+Webpack 2 の場合: オプションを loader ルールに直接渡します。
+
+``` js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // vue-loader オプション
+ }
+ }
+ ]
+ }
+}
+```
+
+Webpack 1.x の場合: Webpack の設定のルートに `vue` ブロックを追加します。
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // vue-loader オプション
+ }
+}
+```
+
+### loaders
+
+- 型: `{ [lang: string]: string }`
+
+ `* .vue` ファイル内の言語ブロックに使用されるデフォルトの loader を上書きする Webpack loader を指定するオブジェクト。キーは指定されている場合、言語ブロックの `lang` 属性に対応します。各タイプのデフォルトの `lang` は次のとおりです:
+
+ - ``: `html`
+ - `
+
+
+
+
+
+
+
+
+```
diff --git a/docs/kr/configurations/extract-css.md b/docs/kr/configurations/extract-css.md
new file mode 100644
index 000000000..e6aede8f4
--- /dev/null
+++ b/docs/kr/configurations/extract-css.md
@@ -0,0 +1,104 @@
+# CSS 단일 파일로 추출하기
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## 쉬운 방법
+
+> vue-loader@^12.0.0와 webpack@^2.0.0 필요
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // other options...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+위 코드는 `*.vue` 파일 내부에서 `
+```
+
+내부적으로, `
+```
+
+그러나 이것은 Vue 컴포넌트가 Webpack에 한정되어 있고 Browserify 및 [vueify](https://github.com/vuejs/vueify)와 호환되지 않습니다. **Vue 컴포넌트를 재사용 가능한 써드파티로 제공하려면 이 구문을 사용하지 마십시오.**
diff --git a/docs/kr/features/css-modules.md b/docs/kr/features/css-modules.md
new file mode 100644
index 000000000..c1c8edbf2
--- /dev/null
+++ b/docs/kr/features/css-modules.md
@@ -0,0 +1,117 @@
+# CSS 모듈
+
+> 9.8.0 이상 버전을 요구합니다
+
+[CSS 모듈](https://github.com/css-modules/css-modules)은 CSS을 모듈화하고 구성하는데 널리 사용되는 시스템입니다. `vue-loader`는 시뮬레이트된 범위 CSS의 대안으로 CSS 모듈과 함께 1급 클래스로의 통합을 제공합니다.
+
+### 사용법
+
+`
+```
+
+이렇게하면 `css-loader`에 대한 CSS 모듈 모드가 켜지고 결과적으로 클래스 식별자 오브젝트는 `$style` 이름의 계산된 속성으로 컴포넌트에 주입됩니다. 동적 클래스 바인딩을 사용하여 템플릿에서 이를 사용할 수 있습니다.
+
+``` html
+
+ {{ docs }}
++ 이것은 빨간색이야 +
+ +``` + +이는 계산된 속성이기 때문에 `:class`의 오브젝트/배열 문법에도 작동합니다. + +``` html + +
+
+
+```
+
+또한 JavaScript에서도 접근할 수 있습니다.
+
+``` html
+
+```
+
+[전역 예외사항](https://github.com/css-modules/css-modules#exceptions)과 [구성](https://github.com/css-modules/css-modules#composition) 같은 자세한 정보는 [CSS 모듈 스펙](https://github.com/css-modules/css-modules)을 참고하세요.
+
+### 사용자 정의 이름 주입
+
+하나의 `*.vue` 컴포넌트 내에 하나 이상의 `
+
+
+```
+
+### `css-loader` 쿼리 설정
+
+CSS 모듈은 [css-loader](https://github.com/webpack/css-loader)를 통해 처리됩니다. `
+
+
+ + 나는 빨간색이야? +
++ 나는 빨간색이면서 볼드야 +
+안녕
+
+```
+
+다음과 같이 변환됩니다.
+
+``` html
+
+
+
+ 안녕
+
+```
+
+#### 참고사항
+
+1. 범위가 지정된 스타일과 범위가 지정되지 않은 스타일은 동일한 컴포넌트에 포함 할 수 있습니다.
+
+ ``` html
+
+
+
+ ```
+
+2. 하위 컴포넌트의 루트 노드는 상위 범위 CSS와 하위 범위 CSS의 영향을 받습니다.
+
+3. Partial은 범위가 지정된 스타일의 영향을 받지 않습니다.
+
+4. **범위가 지정된 스타일은 클래스의 필요성을 제거하는 것이 아닙니다**. 브라우저가 다양한 CSS 셀렉터를 렌더링하는 방식 때문에 `p { color: red }`는 범위(즉 속성 선택자와 결합될 때)가 지정될 때 몇 배는 더 느려집니다. `.example { color: red }`와 같이 클래스 또는 id를 대신 사용한다면 성능 이슈를 해결할 수 있습니다. [여기 플레이그라운드](http://stevesouders.com/efws/css-selectors/csscreate.php)에서 차이점을 테스트 할 수 있습니다.
+
+5. **하위 컴포넌트의 선택자 사용을 조심하세요!** 선택자 `.a .b`가 있는 CSS 규칙의 경우 `.a`와 일치하는 요소에 하위 컴포넌트가 포함되어 있을 경우 해당 하위 컴포넌트의 모든 `.b`가 CSS 규칙에 적용됩니다.
diff --git a/docs/kr/options.md b/docs/kr/options.md
new file mode 100644
index 000000000..3c7572fa0
--- /dev/null
+++ b/docs/kr/options.md
@@ -0,0 +1,249 @@
+# 옵션 레퍼런스
+
+## Webpack 1 & 2 사용 방법의 차이점
+
+Webpack 2 : 직접 loader 규칙에 전달합니다
+
+``` js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue',
+ options: {
+ // vue-loader 옵션
+ }
+ }
+ ]
+ }
+}
+```
+
+Webpack 1.x의 경우 Webpack 설정에 루트 `vue` 블럭을 추가합니다.
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // vue-loader 옵션
+ }
+}
+```
+
+### 로더
+
+- 타입: `{ [lang: string]: string }`
+
+ `*.vue` 파일의 언어 블럭에 사용할 Webpack 로더를 지정하는 객체입니다. 이 키는 특별히 지정된 경우 language block에 대한 `lang` 속성에 해당합니다. 각 타입에 대한 기본적인 `lang`은 다음과 같습니다.
+
+ - ``: `html`
+ - `
+
+
+
+
+
+
+
+
+ ```
diff --git a/docs/pt_BR/configurations/extract-css.md b/docs/pt_BR/configurations/extract-css.md
new file mode 100644
index 000000000..b15e95ea4
--- /dev/null
+++ b/docs/pt_BR/configurations/extract-css.md
@@ -0,0 +1,70 @@
+# Extraindo CSS em um único arquivo
+
+Exemplo de configuração para extrair todo CSS processado de todos componentes Vue em um único arquivo CSS:
+
+### Webpack 2.x
+
+```bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+```js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // outras opções...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ loaders: {
+ css: ExtractTextPlugin.extract({
+ loader: 'css-loader',
+ fallbackLoader: 'vue-style-loader' // <- isto é uma dependência de vue-loader, então não é necessário instalar explicitamente se estiver usando npm3
+ })
+ }
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+### Webpack 1.x
+
+```bash
+npm install extract-text-webpack-plugin
+```
+
+```js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // outras opções...
+ module: {
+ loaders: [
+ {
+ test: /\.vue$/,
+ loader: 'vue'
+ },
+ ]
+ },
+ vue: {
+ loaders: {
+ css: ExtractTextPlugin.extract("css"),
+ // você também pode incluir
+```
+
+Por baixo do capô, o conteúdo de texto dentro da tag `
+```
+
+Contudo, observe que isso faz com que seu componente Vue se torne especifico para Webpack e não compatível com Browserify e [vueify](https://github.com/vuejs/vueify). **Se você pretende enviar seu componente Vue como um componente reutilizável para terceiros, evite usar está sintaxe**.
diff --git a/docs/pt_BR/features/css-modules.md b/docs/pt_BR/features/css-modules.md
new file mode 100644
index 000000000..c1fbba6bb
--- /dev/null
+++ b/docs/pt_BR/features/css-modules.md
@@ -0,0 +1,117 @@
+# Módulos CSS
+
+> Requer versão ^9.8.0
+
+[Módulos CSS](https://github.com/css-modules/css-modules) é um sistema popula para modularização e composição de CSS. `vue-loader` fornece integração de alto nível com módulos CSS como uma alternativa para simular escopo CSS.
+
+### Uso
+
+Basta adicionar o atributo `module` ao seu `
+```
+
+Isto ativará o modo Módulo CSS para `css-loader`, e a classe resultante que identifica o objeto será injetada dentro do componente como uma propriedade computada com o nome `$style`. Você pode usá-lo em seus templates com uma ligação de classe dinâmica.
+
+```html
+
+ {{ docs }}
++ Isto deve ser vermelho +
+ +``` + +Uma vez que a propriedade é computada, ela também funciona com a sintaxe object/array de `:class`: + +```html + +
+
+
+```
+
+E você também pode acessá-la com JavaScript:
+
+```html
+
+```
+
+Consulte a [especificação do Módulo CSS](https://github.com/css-modules/css-modules) para detalhes como modo [exceções globais](https://github.com/css-modules/css-modules#exceptions) e [composição](https://github.com/css-modules/css-modules#composition).
+
+### Nome de Injeção Personalizado
+
+Você pode ter mais de uma tag `
+
+
+```
+
+### Configurando consulta `css-loader`
+
+Módulos CSS são processados via [css-loader](https://github.com/webpack/css-loader). Com `
+
+
+ + Eu sou vermelho? +
++ Vermelho e negrito +
+hi
+
+```
+
+Para o seguinte:
+
+```html
+
+
+
+ hi
+
+```
+
+#### Observações
+
+1. Você pode incluir ambos os estilos com escopo e sem escopo no mesmo componente:
+
+ ```html
+
+
+
+ ```
+
+2. Um nó raiz do componente filho irá ser afetado por ambos os CSS com escopo dos parentes e o CSS com escopo dos filhos.
+
+3. Templates parciais não são afetados por estilo com escopo.
+
+4. **Os estilos com escopo não eliminam a necessidade de classes**. Devido a forma como navegadores processam vários seletores CSS, `p { color: red }` irá ser muitas vezes mais lento quando com escopo \(exemplo: quando combinado com um seletor de atributo\). Se você usa classes ou ids ao invés, como em `.example { color: red }`, então você elimina praticamente esse desempenho atingido. [Aqui está um playground](http://stevesouders.com/efws/css-selectors/csscreate.php) onde você pode testar as diferenças você mesmo.
+
+5. **Tenha cuidado com seletores descendentes em componentes recursivos!** Para uma regra CSS com o seletor `.a .b`, se o elemento que coincide com `.a` contém um componente filho recursivo, então todos os `.b` nesse componente filho serão correspondidos pela regra.
diff --git a/docs/pt_BR/options.md b/docs/pt_BR/options.md
new file mode 100644
index 000000000..a6db98ac7
--- /dev/null
+++ b/docs/pt_BR/options.md
@@ -0,0 +1,188 @@
+# Referência de Opções
+
+## Diferença do uso entre Webpack 1 & 2
+
+Para Webpack 2: passe as opções diretamente para a regra do carregador.
+
+```js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // opções de vue-loader
+ }
+ }
+ ]
+ }
+}
+```
+
+Para Webpack 1.x: Adicione um bloco \`vue\` na raiz de suas configurações Webpack:
+
+```js
+module.exports = {
+ // ...
+ vue: {
+ // opções de vue-loader
+ }
+}
+```
+
+### loaders
+
+- tipo: `{ [lang: string]: string }`
+
+ Um objeto especificando carregadores de Webpack para substituir carregadores padrão usados para blocos de linguagem dentro de arquivos `*.vue`. A chave corresponde ao atributo `lang` para o bloco de linguagem, se especificado. O padrão `lang` para cada tipo é:
+
+ - ``: `html`
+ - `
+
+
+
+{{ msg }}
+
+
+
+```
+
+Veja como importá-lo com simulações:
+
+> Nota: inject-loader@3.x está atualmente instável.
+
+```bash
+npm install inject-loader@^2.0.0 --save-dev
+```
+
+```js
+// exemplo.spec.js
+const ExemploInjecao = require('!!vue?inject!./exemplo.vue')
+```
+
+Observe que ele requer uma sequência de caracteres - nós estamos usando algumas [requisições de carregador webpack](https://webpack.github.io/docs/loaders.html) em linha aqui. Uma explicação rápida:
+
+- `!!` no início significa "desative todos os carregadores da configuração global";
+- `vue?inject!` significa "use o carregador de `vue`, e passe o `?inject` na consulta". Isso informa ao `vue-loader` para compilar o componente no modo injeção de dependência.
+
+O retorno de `ExemploInjecao` é uma função de fábrica que pode ser chamada para criar instâncias do módulo `exemplo.vue`.
+
+```js
+const ExemploComMocks = ExemploInjecao({
+ // simulação de serviço
+ '../servico': {
+ msg: 'Olá de uma simulação de serviço!'
+ }
+})
+```
+
+Finalmente, podemos testar o componente como de costume:
+
+```js
+it('Deve renderizar', () => {
+ const vm = new Vue({
+ template: '{{ msg }}
-
-
-
-
-
-```
-
-Использование `vue-loader` предоставляет множество интересных возможностей:
-
-- Позволяет использовать разнообразные загрузчики webpack для разных секций компонента Vue, например Sass для `
+```
+
+#### webpack.config.js
+
+``` js
+// Webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue',
+ options: {
+ loaders: {
+ // извлечь всё содержимое тегов
+
+
+
+
+```
diff --git a/docs/ru/configurations/extract-css.md b/docs/ru/configurations/extract-css.md
new file mode 100644
index 000000000..e092e87bb
--- /dev/null
+++ b/docs/ru/configurations/extract-css.md
@@ -0,0 +1,103 @@
+# Извлечение CSS в отдельный файл
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## Простой путь
+
+> требуется vue-loader@^12.0.0 и webpack@^2.0.0
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // другие настройки...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+Указанный выше пример будет автоматически обрабатывать извлечение `
+```
+
+В недрах, текстовое содержимое тега `
+```
+
+Обратите внимание, это сделает ваш компонент Vue зависимым от Webpack и несовместимым с Browserify и [vueify](https://github.com/vuejs/vueify). **Если вы планируете распространять ваш компонент Vue, избегайте использования этого синтаксиса.**
diff --git a/docs/ru/features/css-modules.md b/docs/ru/features/css-modules.md
new file mode 100644
index 000000000..d73760a90
--- /dev/null
+++ b/docs/ru/features/css-modules.md
@@ -0,0 +1,117 @@
+# CSS модули
+
+> требуется версия 9.8.0 или выше
+
+[CSS модули](https://github.com/css-modules/css-modules) — это популярная система для модульности и компоновки CSS. `vue-loader` предоставляет первоклассную интеграцию с CSS модулями как возможную альтернативу эмулируемого scoped CSS.
+
+### Использование
+
+Просто добавьте атрибут `module` к тегу `
+```
+
+Это включит режим CSS-модулей в `css-loader`, и полученный индентификатор объекта класса будет внедрен в компонент как вычисляемое свойство с именем `$style`. Вы можете использовать его в своих шаблонах для динамического добавления классов:
+
+``` html
+
+ {{ docs }}
++ Этот текст будет красным +
+ +``` + +Поскольку это вычисляемое свойство, оно также будет работает с объектом/массивом в `:class`: + +``` html + +
+
+
+```
+
+Вы также можете получить доступ в JavaScript:
+
+``` html
+
+```
+
+Обратитесь к [спецификации CSS-модулей](https://github.com/css-modules/css-modules) для получения информации о [глобальных исключениях](https://github.com/css-modules/css-modules#exceptions) и [композиции](https://github.com/css-modules/css-modules#composition).
+
+### Указание внедряемого имени модуля
+
+У вас может быть более одного `
+
+
+```
+
+### Настройка параметров `css-loader`
+
+CSS-модули обрабатываются с помощью [css-loader](https://github.com/webpack/css-loader). При использовании `
+
+
+ + Буду ли я красным? +
++ Красный и жирный +
+hi
+
+```
+
+В что-то подобное:
+
+``` html
+
+
+
+ hi
+
+```
+
+#### Примечания
+
+1. Вы можете использовать в компоненте локальные и глобальные стили одновременно:
+
+ ``` html
+
+
+
+ ```
+
+2. Корневой тег компонента потомка будет попадать под область видимости родительского локального CSS и своего локального CSS.
+
+3. Partials не затрагиваются локальными стилями.
+
+4. **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](http://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно.
+
+5. **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу.
diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md
deleted file mode 100644
index bdcb76b02..000000000
--- a/docs/ru/guide/README.md
+++ /dev/null
@@ -1,92 +0,0 @@
-# Начало работы
-
-## Vue CLI
-
-Если вы не заинтересованы настраивать вручную webpack, тогда мы рекомендуем вам разворачивать проекты с помощью [Vue CLI](https://github.com/vuejs/vue-cli). Проекты создаваемые с помощью Vue CLI предварительно сконфигурированы с учётом большинства общих потребностей при разработке из коробки.
-
-Следуйте этому руководству, если встроенная конфигурация Vue CLI не подходит для ваших нужд, или вы предпочитаете создавать собственную конфигурацию webpack с нуля.
-
-## Настройка вручную
-
-### Установка
-
-Если вы не продвинутый пользователь, использующий собственную форкнутую версию компилятора шаблонов Vue, то должны установить `vue-loader` и `vue-template-compiler` вместе:
-
-``` bash
-npm install -D vue-loader vue-template-compiler
-```
-
-Причина, по которой `vue-template-compiler` требуется устанавливать отдельно в том, что можно отдельно указать его версию.
-
-Каждый раз, когда выходит новая версия `vue`, выпускается и соответствующая версия `vue-template-compiler`. Версия компилятора должна быть аналогичной версии базового пакета `vue`, чтобы `vue-loader` генерировал код совместимый с runtime. Поэтому **каждый раз, когда вы обновляете `vue` в проекте, вы должны также обновить и `vue-template-compiler` до такой же версии.**
-
- ### Конфигурация webpack
-
-Конфигурация Vue Loader немного отличается от настройки других загрузчиков. В дополнении к правилу, которое будет применять `vue-loader` ко всем файлам с расширением `.vue`, убедитесь что добавили плагин Vue Loader в вашу конфигурацию webpack:
-
-``` js
-// webpack.config.js
-const { VueLoaderPlugin } = require('vue-loader')
-
-module.exports = {
- module: {
- rules: [
- // ... другие правила
- {
- test: /\.vue$/,
- loader: 'vue-loader'
- }
- ]
- },
- plugins: [
- // убедитесь что подключили плагин!
- new VueLoaderPlugin()
- ]
-}
-```
-
-**Плагин необходим!** Он отвечает за клонирование любых других правил, которые вы определили, чтобы применить их к соответствующим языковым блокам в файлах `.vue`. Например, если у вас есть правило, соответствующее файлам `/\.js$/`, оно будет применяться к секциям `
-```
-
-Обратитесь к [спецификации CSS-модулей](https://github.com/css-modules/css-modules) для получения информации о [глобальных исключениях](https://github.com/css-modules/css-modules#exceptions) и [композиции](https://github.com/css-modules/css-modules#composition).
-
-## Опциональное использование
-
-Если вы хотите использовать CSS модули только в некоторых компонентах Vue, вы можете использовать правило `oneOf` и проверять наличие строки `module` внутри `resourceQuery`:
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.css$/,
- oneOf: [
- // это соответствует `
-
-
-```
diff --git a/docs/ru/guide/custom-blocks.md b/docs/ru/guide/custom-blocks.md
deleted file mode 100644
index 6ac91f677..000000000
--- a/docs/ru/guide/custom-blocks.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# Пользовательские блоки
-
-Вы можете определять пользовательские блоки внутри файлов `*.vue`. Загрузчики, применяемые к такому блоку, будут определяться сопоставлением по атрибуту `lang` блока, имени тега блока, и правил в вашей конфигурации webpack.
-
-Если указан атрибут `lang`, пользовательский блок будет обработан как файл с расширением, указанном в `lang`.
-
-Вы также можете использовать `resourceQuery` для определения правила для блока без атрибута `lang`. Например, для сопоставления пользовательского блока `Hello
-
-
-
-
-
-
-
-```
diff --git a/docs/ru/guide/extract-css.md b/docs/ru/guide/extract-css.md
deleted file mode 100644
index 94f61d36d..000000000
--- a/docs/ru/guide/extract-css.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Извлечение CSS в отдельный файл
-
-::: tip СОВЕТ
-Применяйте извлечение CSS в отдельный файл только в production, чтобы использовать горячую перезагрузку CSS на этапе разработки.
-:::
-
-## webpack 4
-
-``` bash
-npm install -D mini-css-extract-plugin
-```
-
-``` js
-// webpack.config.js
-var MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-module.exports = {
- // другие настройки...
- module: {
- rules: [
- // ... другие правила опущены
- {
- test: /\.css$/,
- use: [
- process.env.NODE_ENV !== 'production'
- ? 'vue-style-loader'
- : MiniCssExtractPlugin.loader,
- 'css-loader'
- ]
- }
- ]
- },
- plugins: [
- // ... плагин Vue Loader опущен
- new MiniCssExtractPlugin({
- filename: 'style.css'
- })
- ]
-}
-```
-
-Также смотрите [документацию mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).
-
-## webpack 3
-
-``` bash
-npm install -D extract-text-webpack-plugin
-```
-
-``` js
-// webpack.config.js
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
-
-module.exports = {
- // другие настройки...
- module: {
- rules: [
- // ... другие правила опущены
- {
- test: /\.css$/,
- loader: ExtractTextPlugin.extract({
- use: 'css-loader',
- fallback: 'vue-style-loader'
- })
- }
- ]
- },
- plugins: [
- // ... плагин Vue Loader опущен
- new ExtractTextPlugin("style.css")
- ]
-}
-```
-
-Также смотрите [документацию extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin).
diff --git a/docs/ru/guide/functional.md b/docs/ru/guide/functional.md
deleted file mode 100644
index 421979506..000000000
--- a/docs/ru/guide/functional.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Функциональные компоненты
-
-Функциональные компоненты, объявленные как однофайловые компоненты в файле `*.vue`, также получают правильную поддержку компиляции шаблона, локальный CSS и поддержку горячей перезагрузки.
-
-Чтобы обозначить шаблон, который должен быть скомпилирован как функциональный компонент, добавьте атрибут `functional` в тег шаблона. Это также позволяет опустить опцию `functional` в теге `
-
-
-
-{{ docs }}
-+ This should be red +
+ +``` + +由于它是一个计算属性，它也适用于 `:class` 的 object/array 语法： + +``` html + +
+
+
+```
+
+你也可以在 JavaScript 访问它：
+
+``` html
+
+```
+
+请参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 了解更多详细信息 [global exceptions](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition).
+
+### 自定义注入名称
+
+在 `.vue` 中你可以定义不止一个 `
+
+
+```
+
+### 配置 `css-loader` Query
+
+CSS 模块处理是通过 [css-loader](https://github.com/webpack/css-loader)。默认 query 如下：
+
+``` js
+{
+ modules: true,
+ importLoaders: true,
+ localIdentName: '[hash:base64]'
+}
+```
+
+你可以使用 `vue-loader` 的 `cssModules` 选项去为 `css-loader` 添加 query 配置：
+
+``` js
+// webpack 1
+vue: {
+ cssModules: {
+ // overwrite local ident name
+ localIdentName: '[path][name]---[local]---[hash:base64:5]',
+ // enable camelCase
+ camelCase: true
+ }
+}
+
+// webpack 2
+module: {
+ rules: [
+ {
+ test: '\.vue$',
+ loader: 'vue-loader',
+ options: {
+ cssModules: {
+ localIdentName: '[path][name]---[local]---[hash:base64:5]',
+ camelCase: true
+ }
+ }
+ }
+ ]
+}
+```
diff --git a/docs/zh-cn/features/es2015.md b/docs/zh-cn/features/es2015.md
new file mode 100644
index 000000000..8c0184e1c
--- /dev/null
+++ b/docs/zh-cn/features/es2015.md
@@ -0,0 +1,65 @@
+# ES2015
+
+当项目中配置了 `babel-loader` 或者 `buble-loader`，`vue-loader` 会使用他们处理所有 `.vue` 文件中的 `
+```
+
+我们使用 ES2015 的属性的简洁表示法去定义子组件，`{ ComponentA }` 是 `{ ComponentA: ComponentA }` 的简写，Vue 会自动的将 key 转换为`component-a`，所以你可以在 template 中使用 `+ Am I red? +
++ Red and bold +
+
+```
+
+可以简写为：
+
+``` html
+
-
-
-
-
-
-
diff --git a/test/fixtures/ts.vue b/test/fixtures/ts.vue
deleted file mode 100644
index 95031a7f2..000000000
--- a/test/fixtures/ts.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
+```
+
+**vue@^2.1.0 only:** 你可以在 `v-for` 或者 scoped slots 中使用解构赋值：
+
+``` html
+
+ {{ id }} {{ text }}
+
+```
+
+``` html
+
+
+ {{ id }} {{ text }}
+
+
+```
+
+你还可以使用 [`buble` 选项](../options.md#buble) 自定义模板中支持的功能。
+
+### 转换普通 `.js` 文件
+
+由于 `vue-loader` 只处理 `.vue` 文件，你需要告诉 Webpack 如何使用 `babel-loader` 或者 `buble-loader` 处理普通 `.js` 文件，在 Webpack 中配置 `babel-loader` 或者 `buble-loader`。脚手架工具 `vue-cli` 已经为你做了这些。
+
+### 使用 `.babelrc` 配置 Babel
+
+`babel-loader` 遵守 [`.babelrc`](https://babeljs.io/docs/usage/babelrc/)，因此这是配置 Babel presets 和插件推荐的方法。
diff --git a/docs/zh-cn/features/hot-reload.md b/docs/zh-cn/features/hot-reload.md
new file mode 100644
index 000000000..944d23923
--- /dev/null
+++ b/docs/zh-cn/features/hot-reload.md
@@ -0,0 +1,7 @@
+# 热重载
+
+"热重载"不是当你修改文件的时候简单重新加载页面。启用热重载后，当你修改 `.vue` 文件时，所有该组件的实例会被替换，**并且不需要刷新页面**。它甚至保持应用程序和被替换组件的当前状态！当你调整模版或者修改样式时，这极大的提高了开发体验。
+
+
+
+当使用脚手架工具 `vue-cli` 时，热重载是开箱即用的。
diff --git a/docs/zh-cn/features/postcss.md b/docs/zh-cn/features/postcss.md
new file mode 100644
index 000000000..175353824
--- /dev/null
+++ b/docs/zh-cn/features/postcss.md
@@ -0,0 +1,68 @@
+# PostCSS
+
+由`vue-loader` 处理的 CSS 输出，都是通过 [PostCSS](https://github.com/postcss/postcss) 进行作用域重写，你还可以为 PostCSS 添加自定义插件，例如 [autoprefixer](https://github.com/postcss/autoprefixer) 或者 [CSSNext](http://cssnext.io/)。
+
+## 使用配置文件
+
+`vue-loader` 从 11.0 版本开始支持通过 [`postcss-loader`](https://github.com/postcss/postcss-loader#usage) 自动加载同一个配置文件：
+
+- `postcss.config.js`
+- `.postcssrc`
+- `package.json` 中的 `postcss`
+
+使用配置文件允许你在由 `postcss-loader` 处理的普通CSS文件和 `*.vue` 文件中的 CSS 之间共享相同的配置，这是推荐的做法。
+
+## 内联选项
+
+或者，你可以使用 `vue-loader` 的 `postcss` 选项来为 `.vue` 文件指定配置。
+
+Webpack 1.x 例子：
+
+``` js
+// webpack.config.js
+module.exports = {
+ // other configs...
+ vue: {
+ // use custom postcss plugins
+ postcss: [require('postcss-cssnext')()]
+ }
+}
+```
+
+Webpack 2.x 例子:
+
+``` js
+// webpack.config.js
+module.exports = {
+ // other options...
+ module: {
+ // module.rules is the same as module.loaders in 1.x
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ // vue-loader options goes here
+ options: {
+ // ...
+ postcss: [require('postcss-cssnext')()]
+ }
+ }
+ ]
+ }
+}
+```
+
+除了插件数组之外，`postcss` 配置选项也接受：
+
+- 返回插件数组的函数；
+
+- 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 `parser/stringifiers`时，这很有用：
+
+ ``` js
+ postcss: {
+ plugins: [...], // list of plugins
+ options: {
+ parser: sugarss // use sugarss parser
+ }
+ }
+ ```
diff --git a/docs/zh-cn/features/scoped-css.md b/docs/zh-cn/features/scoped-css.md
new file mode 100644
index 000000000..237e0321e
--- /dev/null
+++ b/docs/zh-cn/features/scoped-css.md
@@ -0,0 +1,51 @@
+# CSS 作用域
+
+当 `
+
+
+
+ This could be e.g. documentation for the component.
+
+```
+
+`vue-loader` 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 CommonJS 模块，`module.exports` 出一个 Vue.js 组件对象。
+
+`vue-loader` 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 `lang` 属性。例如，你可以像下面这样使用 SASS 语法编写样式：
+
+``` html
+
+```
+
+更多细节可以在 [预处理器](../configurations/pre-processors.md) 中找到。
+
+### 语言块
+
+#### ``
+
+- 默认语言：`html`。
+
+- 每个 `.vue` 文件最多包含一个 `` 块
+
+- 内容将被提取为字符串，将编译并用作 Vue 组件的 `template` 选项。
+
+#### `
+```
+
+需要注意的是 `src` 导入遵循和 `require()` 一样的规则，这意味着你相对路径需要以 `./` 开始，你还可以从 NPM 包中直接导入资源，例如：
+
+``` html
+
+
-```
-
-Vue Loader 还提供了很多酷炫的特性：
-
-- 允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 `
-```
-
-这个 `module` 特性指引 Vue Loader 作为名为 `$style` 的计算属性，向组件注入 CSS Modules 局部对象。然后你就可以在模板中通过一个动态类绑定来使用它了：
-
-``` vue
-
- `：
-
-``` js
-{
- module: {
- rules: [
- {
- resourceQuery: /blockType=foo/,
- loader: 'loader-to-use'
- }
- ]
- }
-}
-```
-
-如果找到了一个自定义块的匹配规则，它将会被处理，否则该自定义块会被默默忽略。
-
-此外，如果这个自定义块被所有匹配的 loader 处理之后导出一个函数作为最终结果，则这个 `*.vue` 文件的组件会作为一个参数被这个函数调用。
-
-## Example
-
-这里有一个向组件内注入 `` 自定义块的示例，且它是在运行时可用的。
-
-为了注入自定义块的内容，我们将会撰写一个自定义 loader：
-
-``` js
-module.exports = function (source, map) {
- this.callback(
- null,
- `export default function (Component) {
- Component.options.__docs = ${
- JSON.stringify(source)
- }
- }`,
- map
- )
-}
-```
-
-现在我们将会配置 webpack 来使用为 `` 自定义块撰写的自定义 loader。
-
-``` js
-// wepback.config.js
-module.exports = {
- module: {
- rules: [
- {
- resourceQuery: /blockType=docs/,
- loader: require.resolve('./docs-loader.js')
- }
- ]
- }
-}
-```
-
-现在我们可以在运行时访问被导入组件的 `` 块内容了。
-
-``` vue
-
-
-
-This is the documentation for component B.
-
-```
-
-``` vue
-
-
-
- This could be e.g. documentation for the component.
-
-```
-
-`vue-loader` 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。
-
-`vue-loader` 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 `lang` 属性。例如，你可以像下面这样使用 Sass 语法编写样式：
-
-``` vue
-
-```
-
-更多细节可以在[使用预处理器](./guide/pre-processors.md)中找到。
-
-## 语言块
-
-### 模板
-
-- 每个 `.vue` 文件最多包含一个 `` 块。
-
-- 内容将被提取并传递给 `vue-template-compiler` 为字符串，预处理为 JavaScript 渲染函数，并最终注入到从 `
-```
-
-需要注意的是 `src` 导入遵循和 webpack 模块请求相同的路径解析规则，这意味着：
-
-- 相对路径需要以 `./` 开始
-- 你可以从 NPM 依赖中导入资源：
-
-``` vue
-
-
-
-
-export default comp => {
- console.log(comp.options.data())
-}
-
diff --git a/example/test.pug b/example/test.pug
deleted file mode 100644
index f4ed36f6c..000000000
--- a/example/test.pug
+++ /dev/null
@@ -1,2 +0,0 @@
-div(ok)
- h1(:class="$style.red") hello
diff --git a/example/webpack.config.js b/example/webpack.config.js
deleted file mode 100644
index deb7e27be..000000000
--- a/example/webpack.config.js
+++ /dev/null
@@ -1,97 +0,0 @@
-const path = require('path')
-const VueLoaderPlugin = require('../lib/plugin')
-
-module.exports = {
- mode: 'development',
- entry: path.resolve(__dirname, './main.js'),
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: 'bundle.js',
- publicPath: '/dist/'
- },
- devServer: {
- stats: "minimal",
- contentBase: __dirname
- },
- module: {
- rules: [
- // { loader: require.resolve('./debugger') },
- {
- test: /\.vue$/,
- loader: 'vue-loader'
- },
- // example to apply loader to a custom block without lang="xxx"
- // this rule applies to blocks
- {
- resourceQuery: /blockType=foo/,
- loader: 'babel-loader'
- },
- // example configuring preprocessor for
- {
- test: /\.pug$/,
- oneOf: [
- // this applies to in Vue components
- {
- resourceQuery: /^\?vue/,
- use: ['pug-plain-loader']
- },
- // this applies to pug imports inside JavaScript
- {
- use: ['raw-loader', 'pug-plain-loader']
- }
- ]
- },
- // example configuring CSS Modules
- {
- test: /\.css$/,
- oneOf: [
- // this applies to
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/test/fixtures/css-modules-simple.vue b/test/fixtures/css-modules-simple.vue
deleted file mode 100644
index f677aa29c..000000000
--- a/test/fixtures/css-modules-simple.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
diff --git a/test/fixtures/css-modules.vue b/test/fixtures/css-modules.vue
index 473f90ce9..8646cb868 100644
--- a/test/fixtures/css-modules.vue
+++ b/test/fixtures/css-modules.vue
@@ -10,11 +10,11 @@
}
-
diff --git a/test/fixtures/custom-directive.vue b/test/fixtures/custom-directive.vue
deleted file mode 100644
index b11d74e33..000000000
--- a/test/fixtures/custom-directive.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/test/fixtures/custom-language.vue b/test/fixtures/custom-language.vue
index f026cd7f1..3684d135b 100644
--- a/test/fixtures/custom-language.vue
+++ b/test/fixtures/custom-language.vue
@@ -1,6 +1,6 @@
-
- describe('example', () => {
- it('basic', done => {
+
+ describe('example', function () {
+ it('basic', function (done) {
done();
})
})
diff --git a/test/fixtures/duplicate-cssm.css b/test/fixtures/duplicate-cssm.css
deleted file mode 100644
index 611d25565..000000000
--- a/test/fixtures/duplicate-cssm.css
+++ /dev/null
@@ -1 +0,0 @@
-@value color: red;
diff --git a/test/fixtures/duplicate-cssm.js b/test/fixtures/duplicate-cssm.js
deleted file mode 100644
index 20c5905e3..000000000
--- a/test/fixtures/duplicate-cssm.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import values from './duplicate-cssm.css'
-import Comp from './duplicate-cssm.vue'
-
-export { values }
-export default Comp
-
-window.exports = values
diff --git a/test/fixtures/duplicate-cssm.vue b/test/fixtures/duplicate-cssm.vue
deleted file mode 100644
index 0d37d0bd0..000000000
--- a/test/fixtures/duplicate-cssm.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
diff --git a/test/fixtures/script-import.js b/test/fixtures/script-import.js
index 03622bda2..8ab20152a 100644
--- a/test/fixtures/script-import.js
+++ b/test/fixtures/script-import.js
@@ -4,4 +4,4 @@ export default {
msg: 'Hello from Component A!'
}
}
-}
+};
\ No newline at end of file
diff --git a/test/fixtures/service.js b/test/fixtures/service.js
new file mode 100644
index 000000000..8247bc0cc
--- /dev/null
+++ b/test/fixtures/service.js
@@ -0,0 +1,3 @@
+module.exports = {
+ msg: 'hi'
+}
diff --git a/test/fixtures/ssr-scoped-style.js b/test/fixtures/ssr-scoped-style.js
deleted file mode 100644
index 90704991d..000000000
--- a/test/fixtures/ssr-scoped-style.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Vue from 'vue'
-import App from './scoped-css.vue'
-
-export default () => new Vue({
- render: h => h(App)
-})
diff --git a/test/fixtures/ssr-style.js b/test/fixtures/ssr-style.js
index 10055bfa2..38dc1d7f8 100644
--- a/test/fixtures/ssr-style.js
+++ b/test/fixtures/ssr-style.js
@@ -1,6 +1,6 @@
-import Vue from 'vue'
-import App from './ssr-style.vue'
+var Vue = require('vue')
+var App = require('./ssr-style.vue')
-export default () => new Vue({
+module.exports = () => new Vue({
render: h => h(App)
})
diff --git a/test/fixtures/style-import-twice-sub.vue b/test/fixtures/style-import-twice-sub.vue
deleted file mode 100644
index 6ae3d7173..000000000
--- a/test/fixtures/style-import-twice-sub.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/test/fixtures/style-import-twice.vue b/test/fixtures/style-import-twice.vue
deleted file mode 100644
index 1459b47e0..000000000
--- a/test/fixtures/style-import-twice.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-hi
+
+```
+
+转换结果：
+
+``` html
+
+
+
+ hi
+
+```
+
+#### 注意
+
+1. 你可以在一个组件中同时使用 scoped 和 non-scoped styles
+
+ ``` html
+
+
+
+ ```
+
+2. 子组件的根节点将同时受父组件和子组件作用域 CSS 的影响。
+
+3. Partials 不受作用域样式影响。
+
+4. **CSS 作用域不能代替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，`p { color: red }` 在作用域中会慢很多倍（即当与属性选择器组合时）。如果你使用 classes 或者 ids 代替，比如 `.example { color: red }`，这样几乎没有性能影响。[Here's a playground](http://stevesouders.com/efws/css-selectors/csscreate.php) 你可以测试它们的不同。
+
+5. **在递归组件中小心使用后代选择器!** 对于带有选择器 `.a .b` 的CSS 规则，如果元素 `.a` 包含递归子组件，所有的子组件中的 `.b` 会被匹配。
diff --git a/docs/zh-cn/options.md b/docs/zh-cn/options.md
new file mode 100644
index 000000000..6b79401da
--- /dev/null
+++ b/docs/zh-cn/options.md
@@ -0,0 +1,249 @@
+# 选项参考
+
+## Webpack 1 和 2 之间的使用差异
+
+Webpack 2：配置直接放到 loader rule 中。
+
+``` js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // vue-loader options
+ }
+ }
+ ]
+ }
+}
+```
+
+Webpack 1.x：在 Webpack 配置中添加根节点 `vue` 块。
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // vue-loader options
+ }
+}
+```
+
+### loaders
+
+- 类型： `{ [lang: string]: string }`
+
+ 指定 Webpack loader 对象覆盖用于 `*.vue` 文件内的语言块的默认 loader。如果指定，该键对应于语言块的 `lang` 属性。 每种类型的默认 `lang` 是：
+
+ - ``: `html`
+ - `
+
+
+
+- This should be red -
- -``` - -因为这是一个计算属性，所以它也支持 `:class` 的对象/数组语法： - -``` vue - -
-
-
-```
-
-你也可以通过 JavaScript 访问到它：
-
-``` vue
-
-```
-
-你可以查阅 [CSS Modules 规范](https://github.com/css-modules/css-modules)了解更多细节，诸如 [global exceptions](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition) 等。
-
-## 可选用法
-
-如果你只想在某些 Vue 组件中使用 CSS Modules，你可以使用 `oneOf` 规则并在 `resourceQuery` 字符串中检查 `module` 字符串：
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.css$/,
- oneOf: [
- // 这里匹配 `
-
-
-```
diff --git a/docs/zh/guide/custom-blocks.md b/docs/zh/guide/custom-blocks.md
deleted file mode 100644
index 65c6e0bb5..000000000
--- a/docs/zh/guide/custom-blocks.md
+++ /dev/null
@@ -1,96 +0,0 @@
-# 自定义块
-
-在 `.vue` 文件中，你可以自定义语言块。应用于一个自定义块的 loader 是基于这个块的 `lang` 特性、块的标签名以及你的 webpack 配置进行匹配的。
-
-如果指定了一个 `lang` 特性，则这个自定义块将会作为一个带有该 `lang` 扩展名的文件进行匹配。
-
-你也可以使用 `resourceQuery` 来为一个没有 `lang` 的自定义块匹配一条规则。例如为了匹配自定义块 `- Am I red? -
-- Red and bold -
-Hello
-
-
-
-
-
-
-
-```
diff --git a/docs/zh/guide/extract-css.md b/docs/zh/guide/extract-css.md
deleted file mode 100644
index 5b1313d80..000000000
--- a/docs/zh/guide/extract-css.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# CSS 提取
-
-:::tip 提示
-请只在生产环境下使用 CSS 提取，这将便于你在开发环境下进行热重载。
-:::
-
-## webpack 4
-
-``` bash
-npm install -D mini-css-extract-plugin
-```
-
-``` js
-// webpack.config.js
-var MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-module.exports = {
- // 其它选项...
- module: {
- rules: [
- // ... 忽略其它规则
- {
- test: /\.css$/,
- use: [
- process.env.NODE_ENV !== 'production'
- ? 'vue-style-loader'
- : MiniCssExtractPlugin.loader,
- 'css-loader'
- ]
- }
- ]
- },
- plugins: [
- // ... 忽略 vue-loader 插件
- new MiniCssExtractPlugin({
- filename: 'style.css'
- })
- ]
-}
-```
-
-你还可以查阅 [mini-css-extract-plugin 文档](https://github.com/webpack-contrib/mini-css-extract-plugin)。
-
-## webpack 3
-
-``` bash
-npm install -D extract-text-webpack-plugin
-```
-
-``` js
-// webpack.config.js
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
-
-module.exports = {
- // 其它选项...
- module: {
- rules: [
- // ...其它规则忽略
- {
- test: /\.css$/,
- loader: ExtractTextPlugin.extract({
- use: 'css-loader',
- fallback: 'vue-style-loader'
- })
- }
- ]
- },
- plugins: [
- // ...vue-loader 插件忽略
- new ExtractTextPlugin("style.css")
- ]
-}
-```
-
-你也可以查阅 [extract-text-webpack-plugin 文档](https://github.com/webpack-contrib/extract-text-webpack-plugin)。
diff --git a/docs/zh/guide/functional.md b/docs/zh/guide/functional.md
deleted file mode 100644
index 6599c3085..000000000
--- a/docs/zh/guide/functional.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# 函数式组件
-
-在一个 `*.vue` 文件中以单文件形式定义的函数式组件，现在对于模板编译、scoped CSS 和热重载也有了良好的支持。
-
-要声明一个应该编译为函数式组件的模板，请将 `functional` 特性添加到模板块中。这样做以后就可以省略 `
-
-
-
-{{ docs }}
-hi
- - - diff --git a/test/fixtures/empty-style.vue b/test/fixtures/empty-style.vue deleted file mode 100644 index 12b50f3a7..000000000 --- a/test/fixtures/empty-style.vue +++ /dev/null @@ -1,6 +0,0 @@ - -empty style
- - - diff --git a/test/fixtures/entry.js b/test/fixtures/entry.js deleted file mode 100644 index 431e1ed4e..000000000 --- a/test/fixtures/entry.js +++ /dev/null @@ -1,9 +0,0 @@ -import Component from '~target' -import * as exports from '~target' - -if (typeof window !== 'undefined') { - window.module = Component - window.exports = exports -} - -export default Component diff --git a/test/fixtures/extend.vue b/test/fixtures/extend.vue index 9c4ac69a7..ca11dfe65 100644 --- a/test/fixtures/extend.vue +++ b/test/fixtures/extend.vue @@ -4,9 +4,6 @@ - - diff --git a/test/fixtures/extract-css.vue b/test/fixtures/extract-css.vue index 7fed1096e..75034b07c 100644 --- a/test/fixtures/extract-css.vue +++ b/test/fixtures/extract-css.vue @@ -3,7 +3,7 @@ h1 color red - diff --git a/test/fixtures/multiple-rules-2.vue b/test/fixtures/multiple-rules-2.vue deleted file mode 100644 index 97d226939..000000000 --- a/test/fixtures/multiple-rules-2.vue +++ /dev/null @@ -1,9 +0,0 @@ - -Hello World
-
-
-
diff --git a/test/fixtures/multiple-rules.js b/test/fixtures/multiple-rules.js
deleted file mode 100644
index fa741e723..000000000
--- a/test/fixtures/multiple-rules.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Rule1 from './multiple-rules-1.vue'
-import Rule2 from './multiple-rules-2.vue'
-
-window.rules = [Rule1, Rule2]
diff --git a/test/fixtures/named-exports.vue b/test/fixtures/named-exports.vue
deleted file mode 100644
index fe873668a..000000000
--- a/test/fixtures/named-exports.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/test/fixtures/postcss.vue b/test/fixtures/postcss.vue
index 0d4dd195b..a02d550de 100644
--- a/test/fixtures/postcss.vue
+++ b/test/fixtures/postcss.vue
@@ -1,4 +1,4 @@
-
diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue
index 09c01667d..1b5aa0214 100644
--- a/test/fixtures/scoped-css.vue
+++ b/test/fixtures/scoped-css.vue
@@ -15,33 +15,10 @@ h1 {
animation-name: color;
animation-duration: 5s;
}
-.anim-3 {
- animation: 5s color infinite, 5s other;
-}
-.anim-multiple {
- animation: color 5s infinite, opacity 2s;
-}
-.anim-multiple-2 {
- animation-name: color, opacity;
- animation-duration: 5s, 2s;
-}
-
@keyframes color {
from { color: red; }
to { color: green; }
}
-@-webkit-keyframes color {
- from { color: red; }
- to { color: green; }
-}
-@keyframes opacity {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-@-webkit-keyframes opacity {
- from { opacity: 0; }
- to { opacity: 1; }
-}
.foo p >>> .bar {
color: red;
}
@@ -55,11 +32,3 @@ h1 {
-
-
-
-
diff --git a/test/fixtures/template-import-pre.vue b/test/fixtures/template-import-pre.vue
deleted file mode 100644
index 461624104..000000000
--- a/test/fixtures/template-import-pre.vue
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/test/fixtures/template-import.html b/test/fixtures/template-import.html
deleted file mode 100644
index c9dc2eef3..000000000
--- a/test/fixtures/template-import.html
+++ /dev/null
@@ -1,3 +0,0 @@
-{{msg}}
-
-
diff --git a/test/fixtures/template-import.vue b/test/fixtures/template-import.vue
index 00de859d2..461624104 100644
--- a/test/fixtures/template-import.vue
+++ b/test/fixtures/template-import.vue
@@ -1 +1 @@
-
+
diff --git a/test/fixtures/template-pre.js b/test/fixtures/template-pre.js
deleted file mode 100644
index d75dad8d2..000000000
--- a/test/fixtures/template-pre.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Comp1 from './template-pre.vue'
-import Comp2 from './template-import-pre.vue'
-import html from './template-import.pug'
-
-window.exports = {
- Comp1,
- Comp2,
- html
-}
diff --git a/test/fixtures/template-pre.vue b/test/fixtures/template-pre.vue
deleted file mode 100644
index caa2610f1..000000000
--- a/test/fixtures/template-pre.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-
-div
- h1 hello
-
diff --git a/test/fixtures/transform.vue b/test/fixtures/transform.vue
index f43b47c69..33442c644 100644
--- a/test/fixtures/transform.vue
+++ b/test/fixtures/transform.vue
@@ -4,18 +4,6 @@
- hello
-
-
-
-
-
-
-
{{ msg }}
- - - - - diff --git a/test/fixtures/unit-test.js b/test/fixtures/unit-test.js index bb7e55289..422357802 100644 --- a/test/fixtures/unit-test.js +++ b/test/fixtures/unit-test.js @@ -1,5 +1,5 @@ -describe('example', () => { - it('basic', done => { - done() + describe('example', function () { + it('basic', function (done) { + done(); + }) }) -}) diff --git a/test/mock-loaders/docs.js b/test/mock-loaders/docs.js index 6535363b9..f0e749e4a 100644 --- a/test/mock-loaders/docs.js +++ b/test/mock-loaders/docs.js @@ -1,7 +1,7 @@ module.exports = function (source, map) { this.callback(null, - `export default Component => { - Component.options.__docs = ${JSON.stringify(source)} - }`, - map) + 'module.exports = function(Component) {Component.options.__docs = ' + + JSON.stringify(source) + + '}', + map) } diff --git a/test/mock-loaders/identity.js b/test/mock-loaders/identity.js deleted file mode 100644 index 1590b7f40..000000000 --- a/test/mock-loaders/identity.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (source, map) { - this.callback(null, source, map) -} diff --git a/test/mock-loaders/query.js b/test/mock-loaders/query.js deleted file mode 100644 index 0a2ff8727..000000000 --- a/test/mock-loaders/query.js +++ /dev/null @@ -1,22 +0,0 @@ -module.exports = function (content) { - const query = this.resourceQuery.slice(1) - - if (/change/.test(query)) { - return ` - -Changed!
-
-
- `
- }
-
- return content
-}
diff --git a/test/script.spec.js b/test/script.spec.js
deleted file mode 100644
index 180585913..000000000
--- a/test/script.spec.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const {
- mockRender,
- mockBundleAndRun
-} = require('./utils')
-
-test('allow exporting extended constructor', done => {
- mockBundleAndRun({
- entry: 'extend.vue'
- }, ({ window, module }) => {
- // extend.vue should export Vue constructor
- const Component = module
- const vnode = mockRender(Component.options, {
- msg: 'success'
- })
- expect(vnode.tag).toBe('div')
- expect(vnode.children[0].text).toBe('success')
- expect(new Component().msg === 'success')
- done()
- })
-})
-
-test('named exports', done => {
- mockBundleAndRun({
- entry: 'named-exports.vue'
- }, ({ exports }) => {
- expect(exports.default.name).toBe('named-exports')
- expect(exports.foo()).toBe(1)
- done()
- })
-})
diff --git a/test/sourceMap.spec.js b/test/sourceMap.spec.js
deleted file mode 100644
index 263c51a78..000000000
--- a/test/sourceMap.spec.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const { SourceMapConsumer } = require('source-map')
-const { mfs, bundle } = require('./utils')
-
-test('source map', done => {
- bundle({
- entry: 'basic.vue',
- devtool: 'source-map'
- }, code => {
- const map = mfs.readFileSync('/test.build.js.map', 'utf-8')
- const smc = new SourceMapConsumer(JSON.parse(map))
- let line
- let col
- const targetRE = /^\s+msg: 'Hello from Component A!'/
- code.split(/\r?\n/g).some((l, i) => {
- if (targetRE.test(l)) {
- line = i + 1
- col = 0
- return true
- }
- })
- const pos = smc.originalPositionFor({
- line: line,
- column: col
- })
- expect(pos.source.indexOf('basic.vue') > -1)
- expect(pos.line).toBe(9)
- done()
- })
-})
diff --git a/test/ssr.spec.js b/test/ssr.spec.js
deleted file mode 100644
index 716f1395d..000000000
--- a/test/ssr.spec.js
+++ /dev/null
@@ -1,152 +0,0 @@
-const SSR = require('vue-server-renderer')
-
-const {
- genId,
- bundle,
- baseConfig,
- interopDefault,
- DEFAULT_VUE_USE
-} = require('./utils')
-
-test('SSR style and moduleId extraction', done => {
- bundle({
- target: 'node',
- entry: './test/fixtures/ssr-style.js',
- output: {
- path: '/',
- filename: 'test.build.js',
- libraryTarget: 'commonjs2'
- },
- externals: ['vue']
- }, code => {
- const renderer = SSR.createBundleRenderer(code, {
- basedir: __dirname,
- runInNewContext: 'once'
- })
- const context = {
- _registeredComponents: new Set()
- }
- renderer.renderToString(context, (err, res) => {
- if (err) return done(err)
- expect(res).toContain('data-server-rendered')
- expect(res).toContain('Hello
') - expect(res).toContain('Hello from Component A!') - expect(res).toContain('functional
')
- // from main component
- expect(context.styles).toContain('h1 { color: green;')
- // from imported child component
- expect(context.styles).toContain('comp-a h2 {\n color: #f00;')
- // from imported css file
- expect(context.styles).toContain('h1 { color: red;')
- // from imported functional component
- expect(context.styles).toContain('.foo { color: red;')
- // collect component identifiers during render
- expect(Array.from(context._registeredComponents).length).toBe(3)
- done()
- })
- })
-})
-
-test('SSR with scoped CSS', done => {
- bundle({
- target: 'node',
- entry: './test/fixtures/ssr-scoped-style.js',
- output: {
- path: '/',
- filename: 'test.build.js',
- libraryTarget: 'commonjs2'
- },
- externals: ['vue']
- }, code => {
- const renderer = SSR.createBundleRenderer(code, {
- basedir: __dirname,
- runInNewContext: 'once'
- })
- const context = {
- _registeredComponents: new Set()
- }
- renderer.renderToString(context, (err, res) => {
- if (err) return done(err)
-
- const shortId = genId('scoped-css.vue')
- const id = `data-v-${shortId}`
-
- expect(res).toContain('data-server-rendered')
- expect(res).toContain(``)
- expect(res).toContain(`