+
+
+
+
+```
diff --git a/docs/en/configurations/extract-css.md b/docs/en/configurations/extract-css.md
new file mode 100644
index 000000000..457b923d9
--- /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 `
```
-## Child Component Root Elements
+### Child Component Root Elements
With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.
-## Deep Selectors
+### Deep Selectors
If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `>>>` combinator:
@@ -62,26 +64,14 @@ The above will be compiled into:
.a[data-v-f3f3eg9] .b { /* ... */ }
```
-Some pre-processors, such as Sass, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` or `::v-deep` combinator instead - both are aliases for `>>>` and work exactly the same. Based on the example above these two expressions will be compiled to the same output:
-
-``` html
-
-```
-
-``` html
-
-```
+Some pre-processors, such as SASS, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` combinator instead - it's an alias for `>>>` and works exactly the same.
-## Dynamically Generated Content
+### Dynamically Generated Content
DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.
-## Also Keep in Mind
+### Also Keep in Mind
-- **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.
+- **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](https://stevesouders.com/efws/css-selectors/csscreate.php) where you can test the differences yourself.
- **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..635ec0e95
--- /dev/null
+++ b/docs/en/options.md
@@ -0,0 +1,323 @@
+# 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`
+ - `
+
+
+
++ Am I red? +
++ Red and bold +
+- 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/linting.md b/docs/guide/linting.md
deleted file mode 100644
index 87429a54b..000000000
--- a/docs/guide/linting.md
+++ /dev/null
@@ -1,79 +0,0 @@
-# Linting
-
-## ESLint
-
-The official [eslint-plugin-vue](https://eslint.vuejs.org/) supports linting both the template and script parts of Vue single file components.
-
-Make sure to use the plugin's included config in your ESLint config:
-
-``` js
-// .eslintrc.js
-module.exports = {
- extends: [
- "plugin:vue/essential"
- ]
-}
-```
-
-Then from the command line:
-
-``` bash
-eslint --ext js,vue MyComponent.vue
-```
-
-Another option is using [eslint-loader](https://github.com/MoOx/eslint-loader) so that your `*.vue` files are automatically linted on save during development:
-
-``` bash
-npm install -D eslint eslint-loader
-```
-
-Make sure it's applied as a pre-loader:
-
-``` js
-// webpack.config.js
-module.exports = {
- // ... other options
- module: {
- rules: [
- {
- enforce: 'pre',
- test: /\.(js|vue)$/,
- loader: 'eslint-loader',
- exclude: /node_modules/
- }
- ]
- }
-}
-```
-## stylelint
-
-[stylelint](https://stylelint.io) supports linting style parts of Vue single file components.
-
-[Make sure that your stylelint config is right.](https://stylelint.io/user-guide/configuration/)
-
-Then from the command line:
-
-``` bash
-stylelint MyComponent.vue
-```
-
-Another option is using [stylelint-webpack-plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin):
-
-``` bash
-npm install -D stylelint-webpack-plugin
-```
-
-Make sure it's applied as a plugin:
-
-``` js
-// webpack.config.js
-const StyleLintPlugin = require('stylelint-webpack-plugin');
-module.exports = {
- // ... other options
- plugins: [
- new StyleLintPlugin({
- files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
- })
- ]
-}
-```
diff --git a/docs/guide/pre-processors.md b/docs/guide/pre-processors.md
deleted file mode 100644
index 432364458..000000000
--- a/docs/guide/pre-processors.md
+++ /dev/null
@@ -1,270 +0,0 @@
----
-sidebarDepth: 2
----
-
-# Using Pre-Processors
-
-In webpack, all pre-processors need to be applied with a corresponding loader. `vue-loader` allows you to use other webpack loaders to process a part of a Vue component. It will automatically infer the proper loaders to use based on the `lang` attribute of a language block and the rules in your webpack config.
-
-## Sass
-
-For example, to compile our `
-```
-
-Any content inside the block will be processed by webpack as if it's inside a `*.scss` file.
-
-### Sass vs SCSS
-
-Note that `sass-loader` processes the non-indent-based `scss` syntax by default. In order to use the indent-based `sass` syntax, you need to pass options to the loader:
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.sass$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- {
- loader: 'sass-loader',
- options: {
- indentedSyntax: true,
- // sass-loader version >= 8
- sassOptions: {
- indentedSyntax: true
- }
- }
- }
- ]
-}
-```
-
-### Sharing Global Variables
-
-`sass-loader` also supports a `additionalData` option which allows you to share common variables among all processed files without having to explicit import them:
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.scss$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- {
- loader: 'sass-loader',
- options: {
- // you can also read from a file, e.g. `variables.scss`
- // use `prependData` here if sass-loader version = 8, or
- // `data` if sass-loader version < 8
- additionalData: `$color: red;`
- }
- }
- ]
-}
-```
-
-## LESS
-
-``` bash
-npm install -D less less-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.less$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- 'less-loader'
- ]
-}
-```
-
-## Stylus
-
-``` bash
-npm install -D stylus stylus-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.styl(us)?$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- 'stylus-loader'
- ]
-}
-```
-
-## PostCSS
-
-::: tip
-Vue Loader v15 no longer applies PostCSS transforms by default. You will need to use PostCSS via `postcss-loader`.
-:::
-
-``` bash
-npm install -D postcss-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.css$/,
- use: [
- 'vue-style-loader',
- {
- loader: 'css-loader',
- options: { importLoaders: 1 }
- },
- 'postcss-loader'
- ]
-}
-```
-
-Configuration of PostCSS can be done via `postcss.config.js` or `postcss-loader` options. For details, consult [postcss-loader docs](https://github.com/postcss/postcss-loader).
-
-`postcss-loader` can also be applied in combination with other pre-processors mentioned above.
-
-## Babel
-
-``` bash
-npm install -D babel-core babel-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.js?$/,
- loader: 'babel-loader'
-}
-```
-
-Configuration of Babel can be done via `.babelrc` or `babel-loader` options.
-
-### Excluding node_modules
-
-It is common to have `exclude: /node_modules/` for JS transpilation rules (e.g. `babel-loader`) that apply to `.js` files. Due to the inference change of v15, if you import a Vue SFC inside `node_modules`, its `
+
+
+```
+
+#### webpack.config.js
+
+``` js
+// webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ 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..1dbc1b8ef
--- /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` はルールにマッチします。
+
+6. `scoped` スタイルで入れ子のセレクタが必要なら、CSS に対して `>>>` オペレータを、そして `scss` に対しては `/deep/` を使用する必要があります:
+
+ ``` html
+
+
+
+ ```
diff --git a/docs/ja/options.md b/docs/ja/options.md
new file mode 100644
index 000000000..c8960ee8a
--- /dev/null
+++ b/docs/ja/options.md
@@ -0,0 +1,312 @@
+# オプションリファレンス
+
+## 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..1e72ad0ca
--- /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..35db4f1a6
--- /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..304ec19cc
--- /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-loader',
+ 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..39af0031d
--- /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.
+
+6. Se você precisa de seletores aninhados em estilos `scoped`, você terá que usar o operador `>>>` para CSS e `/deep/` para `scss`:
+
+``` html
+
+
+
+ ```
diff --git a/docs/pt_BR/options.md b/docs/pt_BR/options.md
new file mode 100644
index 000000000..0ca6037c8
--- /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-loader?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-loader?inject!` significa "use `vue-loader`, 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-loader',
+ options: {
+ loaders: {
+ // извлечь всё содержимое тегов
+
+
+
+
+```
diff --git a/docs/ru/configurations/extract-css.md b/docs/ru/configurations/extract-css.md
new file mode 100644
index 000000000..b185d3b84
--- /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..778b1e482
--- /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). При использовании `
```
-## Корневой элемент дочернего компонента
+### Корневой узел дочернего компонента
-С помощью `scoped`, стили родительского компонента не будут влиять на содержимое дочерних компонентов. Тем не менее, корневой элемент дочернего компонента будет зависеть как от локального CSS из родительского элемента, так и от локального CSS дочернего. Это предусмотрено специально, чтобы родительский элемент мог стилизовать корневой элемент дочернего компонента например для целей стилизации.
+С помощью `scoped`, стили родительского компонента не будут влиять на содержимое дочерних компонентов. Тем не менее, корневой узел дочернего компонента будет зависеть как от scoped CSS из родительского элемента, так и от scoped CSS дочернего. Это предусмотрено специально, чтобы родительский элемент мог стилизовать корневой элемент дочернего компонента например для целей макета.
-## Глубокие селекторы
+### Глубокие селекторы
Если вы хотите, чтобы селектор в `scoped` стилях был "глубоким", т.е. влиял на дочерние компоненты, вы можете использовать комбинатор `>>>`:
@@ -56,32 +58,20 @@
```
-Указанное выше будет скомпилируется в подобный селектор:
+Указанное выше будет скомпилировано в:
``` css
.a[data-v-f3f3eg9] .b { /* ... */ }
```
-Некоторые пре-процессоры, такие как Sass, не могут правильно обработать `>>>`. В таких случаях используйте комбинатор `/deep/` или `::v-deep` — оба псевдонимы для `>>>` и работают аналогично. На основе примера выше, эти два выражения будут скомпилированы в один и тот же результат:
-
-``` html
-
-```
-
-``` html
-
-```
+Некоторые пре-процессоры, такие как SASS, не могут правильно обработать `>>>`. В таких случаях вы можете использовать комбинатор `/deep/` — это псевдоним для `>>>` работающий точно также.
-## Динамически генерируемый контент
+### Динамически генерируемый контент
-DOM-содержимое, создаваемое с помощью `v-html` не попадает под область действия локальных стилей, но вы всё равно можете его стилизовать с помощью глубоких селекторов.
+DOM-содержимое, создаваемое с помощью `v-html` не попадает под область действия scoped-стилей, но вы всё равно можете его стилизовать воспользовавшись deep-селекторами.
-## О чём следует помнить
+### О чём следует помнить
-- **Локальные стили не устраняют необходимость классов.** Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности.
+- **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](https://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно.
- **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для 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/linting.md b/docs/ru/guide/linting.md
deleted file mode 100644
index 7714af3d6..000000000
--- a/docs/ru/guide/linting.md
+++ /dev/null
@@ -1,79 +0,0 @@
-# Статический анализ кода
-
-## ESLint
-
-Официальный плагин [eslint-plugin-vue](https://eslint.vuejs.org/) поддерживает проверку секций шаблона и кода в однофайловых компонентах Vue.
-
-Убедитесь, что используете поставляемую с плагином конфигурацию в вашей конфигурации ESLint:
-
-``` js
-// .eslintrc.js
-module.exports = {
- extends: [
- "plugin:vue/essential"
- ]
-}
-```
-
-Затем в командной строке:
-
-``` bash
-eslint --ext js,vue MyComponent.vue
-```
-
-Другим вариантом использования будет [eslint-loader](https://github.com/MoOx/eslint-loader), что позволит проверять ваши `*.vue` файлы автоматически при сохранении на этапе разработки:
-
-``` bash
-npm install -D eslint eslint-loader
-```
-
-Убедитесь, что он применяется как предварительный загрузчик:
-
-``` js
-// webpack.config.js
-module.exports = {
- // ... другие настройки
- module: {
- rules: [
- {
- enforce: 'pre',
- test: /\.(js|vue)$/,
- loader: 'eslint-loader',
- exclude: /node_modules/
- }
- ]
- }
-}
-```
-## stylelint
-
-[stylelint](https://stylelint.io) поддерживает проверку секций стилей в однофайловых компонентах Vue.
-
-[Убедитесь, что ваша конфигурация stylelint корректна.](https://stylelint.io/user-guide/configuration/)
-
-Затем выполните в командной строке:
-
-``` bash
-stylelint MyComponent.vue
-```
-
-Вы также можете использовать плагин [stylelint-webpack-plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin):
-
-``` bash
-npm install -D stylelint-webpack-plugin
-```
-
-Убедитесь, что добавили плагин в конфигурацию:
-
-``` js
-// webpack.config.js
-const StyleLintPlugin = require('stylelint-webpack-plugin');
-module.exports = {
- // ... другие настройки
- plugins: [
- new StyleLintPlugin({
- files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
- })
- ]
-}
-```
diff --git a/docs/ru/guide/pre-processors.md b/docs/ru/guide/pre-processors.md
deleted file mode 100644
index 26fa8439d..000000000
--- a/docs/ru/guide/pre-processors.md
+++ /dev/null
@@ -1,270 +0,0 @@
----
-sidebarDepth: 2
----
-
-# Использование пре-процессоров
-
-В webpack все пре-процессоры должны обрабатываться соответствующими загрузчиками. `vue-loader` позволяет вам использовать другие загрузчики webpack для обработки секций в однофайловых компонентах Vue. Они будут автоматически вызваны на основе указанного атрибута `lang` у секции файла.
-
-## Sass
-
-Например, для компиляции нашего тега `
-```
-
-Любое содержимое внутри блока будет обработано webpack, как если бы оно находилось внутри файла `*.scss`.
-
-### Sass vs SCSS
-
-Обратите внимание, что `sass-loader` обрабатывает синтаксис `scss` по умолчанию. Если вам требуется синтаксис `sass` с отступами, то необходимо передать опцию в загрузчик:
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.sass$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- {
- loader: 'sass-loader',
- options: {
- indentedSyntax: true,
- // sass-loader >= 8
- sassOptions: {
- indentedSyntax: true
- }
- }
- }
- ]
-}
-```
-
-### Передача глобальных переменных
-
-`sass-loader` также поддерживает опцию `additionalData`, которая позволяет вам передавать общие переменные во все обрабатываемые файлы без необходимости везде их явно импортировать:
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.scss$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- {
- loader: 'sass-loader',
- options: {
- // вы можете также указать файл, например `variables.scss`
- // используйте свойство `prependData` здесь, если версия sass-loader = 8
- // используйте свойство `data` здесь, если версия sass-loader < 8
- additionalData: `$color: red;`
- }
- }
- ]
-}
-```
-
-## LESS
-
-``` bash
-npm install -D less less-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.less$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- 'less-loader'
- ]
-}
-```
-
-## Stylus
-
-``` bash
-npm install -D stylus stylus-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.styl(us)?$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- 'stylus-loader'
- ]
-}
-```
-
-## PostCSS
-
-::: tip СОВЕТ
-Vue Loader v15 больше не применяет трансформацию PostCSS по умолчанию. Вам необходимо использовать PostCSS через `postcss-loader`.
-:::
-
-``` bash
-npm install -D postcss-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.css$/,
- use: [
- 'vue-style-loader',
- {
- loader: 'css-loader',
- options: { importLoaders: 1 }
- },
- 'postcss-loader'
- ]
-}
-```
-
-Конфигурация PostCSS может быть выполнена через `postcss.config.js` или опции `postcss-loader`. Подробнее можно прочитать в [документации postcss-loader](https://github.com/postcss/postcss-loader).
-
-`postcss-loader` может также применяться в комбинации с другими пре-процессорами, указанными выше.
-
-## Babel
-
-``` bash
-npm install -D babel-core babel-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.js?$/,
- loader: 'babel-loader'
-}
-```
-
-Конфигурация Babel может быть выполнена через `.babelrc` или опции `babel-loader`.
-
-### Исключение node_modules
-
-Обычная практика, указывать `exclude: /node_modules/` для правил транспиляции JS (например, `babel-loader`) которые применяются к файлам `.js`. Из-за изменений версии v15, если вы импортируете однофайловые компоненты SFC внутри `node_modules`, его секция `
-
-
-
-{{ docs }}
-
+
+
+
+
+```
diff --git a/docs/zh-cn/configurations/extract-css.md b/docs/zh-cn/configurations/extract-css.md
new file mode 100644
index 000000000..531360816
--- /dev/null
+++ b/docs/zh-cn/configurations/extract-css.md
@@ -0,0 +1,104 @@
+# 提取 CSS 到单个文件
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## 简单的方法
+
+> 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")
+ ]
+}
+```
+
+上述内容将自动处理 `*.vue` 文件内的 `
+```
+
+在内部，`
+```
+
+但是，这使你的 Vue 组件只适用于 Webpack，不能与 Browserify 和 [vueify](https://github.com/vuejs/vueify) 一同使用。**如果你打算将你的 Vue 组件作为可重复使用的第三方组件，请避免使用这个语法。**
diff --git a/docs/zh-cn/features/css-modules.md b/docs/zh-cn/features/css-modules.md
new file mode 100644
index 000000000..d9f24be47
--- /dev/null
+++ b/docs/zh-cn/features/css-modules.md
@@ -0,0 +1,117 @@
+# CSS Modules
+
+> 需要 ^9.8.0
+
+[CSS Modules](https://github.com/css-modules/css-modules)是一个用于模块化和组合 CSS 的流行系统。`vue-loader` 提供了与 CSS 模块的一流集成，可以作为模拟 CSS 作用域的替代方案。
+
+### 使用
+
+在你的 `
+```
+
+这将为 `css-loader` 打开 CSS Modules 模式，生成的 CSS 对象将为组件注入一个名叫 `$style` 的计算属性，你可以在你的模块中使用动态 class 绑定：
+
+``` html
+
+ {{ docs }}
++ This should be red +
+ +``` + +由于它是一个计算属性，它也适用于 `:class` 的 object/array 语法： + +``` html + +
+
+
+```
+
+你也可以在 JavaScript 访问它：
+
+``` html
+
+```
+
+请参考 [CSS Modules 规范](https://github.com/css-modules/css-modules)了解更多诸如 [global exception](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition) 等详细信息。
+
+### 自定义注入名称
+
+在 `.vue` 中你可以定义不止一个 `
+
+
+```
+
+### 配置 `css-loader` Query
+
+CSS Modules 处理是通过 [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..6bca7f0fd
--- /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
+
+```
+
+**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/guide/functional.md b/docs/zh-cn/features/functional.md
similarity index 57%
rename from docs/zh/guide/functional.md
rename to docs/zh-cn/features/functional.md
index 6599c3085..6177c40bb 100644
--- a/docs/zh/guide/functional.md
+++ b/docs/zh-cn/features/functional.md
@@ -1,21 +1,15 @@
-# 函数式组件
+# 函数式组件的模板
-在一个 `*.vue` 文件中以单文件形式定义的函数式组件，现在对于模板编译、scoped CSS 和热重载也有了良好的支持。
+> 新增于 13.1.0，需要 Vue 版本 >= 2.5.0
+
+从 `vue-loader >= 13.3.0` 开始，在一个 `*.vue` 文件中以单文件形式定义的函数式组件，现在在模板编译、有作用域的 CSS 和热重载也有了良好的支持。
要声明一个应该编译为函数式组件的模板，请将 `functional` 特性添加到模板块中。这样做以后就可以省略 `
+
+
+
+
+ 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-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 @@
-
- 
-
-
-
{{ msg }}
-
-
-
-
-
diff --git a/test/fixtures/unit-test.js b/test/fixtures/unit-test.js
index bb7e55289..a44105ba9 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 `
-
-
- 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/linting.md b/docs/zh/guide/linting.md
deleted file mode 100644
index c631a62fa..000000000
--- a/docs/zh/guide/linting.md
+++ /dev/null
@@ -1,79 +0,0 @@
-# 代码校验 (Linting)
-
-## ESLint
-
-官方的 [eslint-plugin-vue](https://eslint.vuejs.org/) 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。
-
-请确认在你的 ESLint 配置文件中使用该插件要导入的配置：
-
-``` js
-// .eslintrc.js
-module.exports = {
- extends: [
- "plugin:vue/essential"
- ]
-}
-```
-
-接下来从命令行运行：
-
-``` bash
-eslint --ext js,vue MyComponent.vue
-```
-
-另一个选项是使用 [eslint-loader](https://github.com/MoOx/eslint-loader) 那么你的 `*.vue` 文件在开发过程中每次保存的时候就会自动进行代码校验：
-
-``` bash
-npm install -D eslint eslint-loader
-```
-
-请确保它是作为一个 pre-loader 运用的：
-
-``` js
-// webpack.config.js
-module.exports = {
- // ... 其它选项
- module: {
- rules: [
- {
- enforce: 'pre',
- test: /\.(js|vue)$/,
- loader: 'eslint-loader',
- exclude: /node_modules/
- }
- ]
- }
-}
-```
-## stylelint
-
-[stylelint](https://stylelint.io) 支持在 Vue 单文件组件的样式部分的代码校验。
-
-[请确认在你的 stylelint 配置文件正确。](https://stylelint.io/user-guide/configuration/)
-
-接下来从命令行运行：
-
-``` bash
-stylelint MyComponent.vue
-```
-
-另一个选项是使用 [stylelint-webpack-plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin):
-
-``` bash
-npm install -D stylelint-webpack-plugin
-```
-
-请确保它是作为一个插件运用的：
-
-``` js
-// webpack.config.js
-const StyleLintPlugin = require('stylelint-webpack-plugin');
-module.exports = {
- // ... 其它选项
- plugins: [
- new StyleLintPlugin({
- files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
- })
- ]
-}
-```
diff --git a/docs/zh/guide/pre-processors.md b/docs/zh/guide/pre-processors.md
deleted file mode 100644
index aeb64cc99..000000000
--- a/docs/zh/guide/pre-processors.md
+++ /dev/null
@@ -1,270 +0,0 @@
----
-sidebarDepth: 2
----
-
-# 使用预处理器
-
-在 webpack 中，所有的预处理器需要匹配对应的 loader。Vue Loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 `lang` 特性以及你 webpack 配置中的规则自动推断出要使用的 loader。
-
-## Sass
-
-例如，为了通过 Sass/SCSS 编译我们的 `
-```
-
-这个块里的任何内容都会被 webpack 当作在一个 `*.scss` 文件中一样被处理。
-
-### Sass vs SCSS
-
-注意 `sass-loader` 会默认处理不基于缩进的 `scss` 语法。为了使用基于缩进的 `sass` 语法，你需要向这个 loader 传递选项：
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.sass$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- {
- loader: 'sass-loader',
- options: {
- indentedSyntax: true,
- // sass-loader version >= 8
- sassOptions: {
- indentedSyntax: true
- }
- }
- }
- ]
-}
-```
-
-### 共享全局变量
-
-`sass-loader` 也支持一个 `additionalData` 选项，这个选项允许你在所有被处理的文件之间共享常见的变量，而不需要显式地导入它们：
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.scss$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- {
- loader: 'sass-loader',
- options: {
- // 你也可以从一个文件读取，例如 `variables.scss`
- // 如果 sass-loader 版本 = 8，这里使用 `prependData` 字段
- // 如果 sass-loader 版本 < 8，这里使用 `data` 字段
- additionalData: `$color: red;`
- }
- }
- ]
-}
-```
-
-## Less
-
-``` bash
-npm install -D less less-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.less$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- 'less-loader'
- ]
-}
-```
-
-## Stylus
-
-``` bash
-npm install -D stylus stylus-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.styl(us)?$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- 'stylus-loader'
- ]
-}
-```
-
-## PostCSS
-
-::: tip
-Vue Loader v15 不再默认应用 PostCSS 变换。你需要通过 `postcss-loader` 使用 PostCSS。
-:::
-
-``` bash
-npm install -D postcss-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.css$/,
- use: [
- 'vue-style-loader',
- {
- loader: 'css-loader',
- options: { importLoaders: 1 }
- },
- 'postcss-loader'
- ]
-}
-```
-
-PostCSS 的配置可以通过 `postcss.config.js` 或 `postcss-loader` 选项来完成。其更多细节请查阅 [postcss-loader 文档](https://github.com/postcss/postcss-loader)。
-
-`postcss-loader` 也可以和上述其它预处理器结合使用。
-
-## Babel
-
-``` bash
-npm install -D babel-core babel-loader
-```
-
-``` js
-// webpack.config.js -> module.rules
-{
- test: /\.js?$/,
- loader: 'babel-loader'
-}
-```
-
-Babel 的配置可以通过 `.babelrc` 或 `babel-loader` 选项来完成。
-
-### 排除 node_modules
-
-`exclude: /node_modules/` 在应用于 `.js` 文件的 JS 转译规则 (例如 `babel-loader`) 中是蛮常见的。鉴于 v15 中的推导变化，如果你导入一个 `node_modules` 内的 Vue 单文件组件，它的 `
-
-
-
-{{ 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/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 @@
-
-
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..1e358f890 100644
--- a/test/fixtures/transform.vue
+++ b/test/fixtures/transform.vue
@@ -4,12 +4,8 @@
- hello
-
-
-
-
{{ msg }}
-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(`