+ 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..6789e7c71
--- /dev/null
+++ b/docs/en/options.md
@@ -0,0 +1,157 @@
+# Options Reference
+
+## Usage Difference Between Webpack 1 & 2
+
+For Webpack 1.x: add a root `vue` block in your Webpack config:
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // vue-loader options
+ }
+}
+```
+
+For Webpack 2 (^2.1.0-beta.25):
+
+``` js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue',
+ options: {
+ // vue-loader options
+ }
+ }
+ ]
+ }
+}
+```
+
+### loaders
+
+- type: `Object`
+
+ An object specifying Webpack loaders to use 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`
+ - `
+
+
+```
+
+`vue-loader` will parse the file, extract each language block, pipe them through other loaders if necessary, and finally assemble them back into a CommonJS module whose `module.exports` is a Vue.js component options object.
+
+`vue-loader` supports using non-default languages, such as CSS pre-processors and compile-to-HTML template languages, by specifying the `lang` attribute for a language block. For example, you can use SASS for the style of your component like this:
+
+``` html
+
+```
+
+More details can be found in [Using Pre-Processors](../configurations/pre-processors.md).
+
+### Language Blocks
+
+#### ``
+
+- Default language: `html`.
+
+- Each `*.vue` file can contain at most one `` block at a time.
+
+- Contents will be extracted as a string and used as the `template` option for the compiled Vue component.
+
+#### `
+```
+
+Beware that `src` imports follow the same path resolution rules to CommonJS `require()` calls, which means for relative paths you need to start with `./`, and you can import resources directly from installed NPM packages, e.g:
+
+``` html
+
+
-```
-
-The `module` attribute instructs Vue Loader to inject the CSS modules locals object into the component as a computed property with the name `$style`. You can then use it in your templates with a dynamic class binding:
-
-``` vue
-
- - 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 `
+```
+
+### 템플릿
+
+`pug-loader`와 같은 대부분의 Webpack 템플릿 로더는 컴파일된 HTML 문자열 대신 템플릿 함수를 반환하기 때문에 템플릿 처리는 앞서 처리한 방법과 약간 다릅니다. `pug-loader` 대신 원래의 `pug` 파일을 설치하여 사용할 수 있습니다.
+
+``` bash
+npm install pug --save-dev
+```
+
+``` html
+
+div
+ h1 Hello world!
+
+```
+
+> **중요:** 만약 `vue-loader@<8.2.0`을 사용한다면, `template-html-loader`도 설치해야 합니다.
+
+### 인라인 로더 요청
+
+당신은 `lang` 속성에서 [Webpack 로더 요청](https://webpack.github.io/docs/loaders.html#introduction)을 할 수 있습니다.
+
+``` html
+
+```
+
+그러나 이것은 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..a8e073dbf
--- /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..ba2219835
--- /dev/null
+++ b/docs/kr/options.md
@@ -0,0 +1,157 @@
+# 옵션 레퍼런스
+
+## Webpack 1 & 2 사용 방법의 차이점
+
+Webpack 1.x의 경우 Webpack 설정에 루트 `vue` 블럭을 추가합니다.
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // vue-loader 옵션
+ }
+}
+```
+
+Webpack 2 (^2.1.0-beta.25)는 다음과 같습니다.
+
+``` js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue',
+ options: {
+ // vue-loader 옵션
+ }
+ }
+ ]
+ }
+}
+```
+
+### 로더
+
+- 타입: `Object`
+
+ `*.vue` 파일의 언어 블럭에 사용할 Webpack 로더를 지정하는 객체입니다. 이 키는 특별히 지정된 경우 language block에 대한 `lang` 속성에 해당합니다. 각 타입에 대한 기본적인 `lang`은 다음과 같습니다.
+
+ - ``: `html`
+ - `
+
+
+```
+
+`vue-loader`는 파일을 파싱하고 각 언어 블럭을 추출한 다음 필요한 경우 다른 로더를 통해 파이프를 구성하고 `module.exports`가 Vue.js 옵션 객체인 CommonJS 모듈로 다시 합쳐줍니다.
+
+`vue-loader`는 언어 블럭에 `lang` 속성을 지정하여 CSS 전처리기 혹은 HTML 컴파일 언어를 사용할 수 있습니다. 예를 들어, 다음과 같이 컴포넌트에 SASS를 사용할 수 있습니다.
+
+``` html
+
+```
+
+자세한 내용은 [전처리기 사용하기](../configurations/pre-processors.md)에서 확인할 수 있습니다.
+
+### 언어 블록
+
+#### ``
+
+- 기본 언어: `html`.
+
+- 각 `*.vue` 파일은 하나의 `` 블럭을 포함 할 수 있습니다.
+
+- 내용은 문자열로 출력되어 컴파일된 Vue 컴포넌트의 `template` 옵션에 사용됩니다.
+
+#### `
+```
+
+`src`로 가져오기가 CommonJS `require()` 호출과 동일한 경로 확인 규칙을 따르기 때문에 주의해야 합니다. 즉, `./`로 시작해야하는 상대 경로를 의미하며 설치된 NPM 패키지에서 직접 리소스를 가져올 수 있습니다.
+
+``` html
+
+
-```
-
-Использование `vue-loader` предоставляет множество интересных возможностей:
-
-- Позволяет использовать разнообразные загрузчики webpack для разных секций компонента Vue, например Sass для `
-```
-
-Атрибут `module` подскажет Vue Loader о необходимости внедрить CSS модуль в компонент в качестве вычисляемого свойства с именем `$style`. Вы можете использовать его в шаблонах для динамического добавления классов:
-
-``` vue
-
- - Текст должен быть красным -
- -``` - -Поскольку это вычисляемое свойство, оно будет работать с объектом/массивом в `:class`: - -``` vue - -
-
-
-```
-
-Вы также можете получить доступ в JavaScript:
-
-``` vue
-
-```
-
-Обратитесь к [спецификации 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` 的对象/数组语法： - -``` 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 }}
-
-
-
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-import.vue b/test/fixtures/custom-import.vue
deleted file mode 100644
index 34eed79df..000000000
--- a/test/fixtures/custom-import.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-{{ msg }}
- -{{msg}}
- - - - - diff --git a/test/fixtures/custom-language.vue b/test/fixtures/custom-language.vue deleted file mode 100644 index f026cd7f1..000000000 --- a/test/fixtures/custom-language.vue +++ /dev/null @@ -1,31 +0,0 @@ -{{msg}}
- - - - - diff --git a/test/fixtures/custom-module.js b/test/fixtures/custom-module.js deleted file mode 100644 index ff1183412..000000000 --- a/test/fixtures/custom-module.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = [ - { - postTransformNode: el => { - if (el.staticClass) { - el.staticClass = '"red blue"' - } - } - } -] diff --git a/test/fixtures/custom-module.vue b/test/fixtures/custom-module.vue deleted file mode 100644 index fd9dbe526..000000000 --- a/test/fixtures/custom-module.vue +++ /dev/null @@ -1,5 +0,0 @@ - -
-
-
-
diff --git a/test/fixtures/custom-options.vue b/test/fixtures/custom-options.vue
deleted file mode 100644
index c8249bbd6..000000000
--- a/test/fixtures/custom-options.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-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/functional.vue b/test/fixtures/functional.vue deleted file mode 100644 index 67a44b636..000000000 --- a/test/fixtures/functional.vue +++ /dev/null @@ -1,22 +0,0 @@ - -
-
-
-
-
diff --git a/test/fixtures/index.html b/test/fixtures/index.html
deleted file mode 100644
index 7e5123ef1..000000000
--- a/test/fixtures/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
- {{ props.msg }}
-Some text
- Not exist
-
- {{ msg }}
+
+
+
diff --git a/test/fixtures/markdown.vue b/test/fixtures/markdown.vue
deleted file mode 100644
index 6eccf3c72..000000000
--- a/test/fixtures/markdown.vue
+++ /dev/null
@@ -1 +0,0 @@
-## {{msg}}
diff --git a/test/fixtures/multiple-roots-template.vue b/test/fixtures/multiple-roots-template.vue
deleted file mode 100644
index a0a7ec719..000000000
--- a/test/fixtures/multiple-roots-template.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/test/fixtures/multiple-rules-1.vue b/test/fixtures/multiple-rules-1.vue
deleted file mode 100644
index 858b3eb1e..000000000
--- a/test/fixtures/multiple-rules-1.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
- Hello World
-
-
-
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..ce28b06bd 100644
--- a/test/fixtures/scoped-css.vue
+++ b/test/fixtures/scoped-css.vue
@@ -8,43 +8,6 @@
h1 {
color: green;
}
-.anim {
- animation: color 5s infinite, other 5s;
-}
-.anim-2 {
- 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 +18,3 @@ h1 {
-
-
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
deleted file mode 100644
index 10055bfa2..000000000
--- a/test/fixtures/ssr-style.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Vue from 'vue'
-import App from './ssr-style.vue'
-
-export default () => new Vue({
- render: h => h(App)
-})
diff --git a/test/fixtures/ssr-style.vue b/test/fixtures/ssr-style.vue
deleted file mode 100644
index 55d15f674..000000000
--- a/test/fixtures/ssr-style.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
-
-
-
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 @@
-Hello
-
-
-
-
-
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
deleted file mode 100644
index f43b47c69..000000000
--- a/test/fixtures/transform.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-
-hello
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
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 @@
-
-
-
-
-
-
-
-
-
-
-{{ msg }}
- - - - - diff --git a/test/fixtures/unit-test.js b/test/fixtures/unit-test.js deleted file mode 100644 index bb7e55289..000000000 --- a/test/fixtures/unit-test.js +++ /dev/null @@ -1,5 +0,0 @@ -describe('example', () => { - it('basic', done => { - done() - }) -}) diff --git a/test/mock-loaders/blog.js b/test/mock-loaders/blog.js deleted file mode 100644 index d441233af..000000000 --- a/test/mock-loaders/blog.js +++ /dev/null @@ -1,8 +0,0 @@ -function normalize (code) { - return code.split(/\r?\n/).map(function (line) { return line }).join('') -} - -module.exports = function (source) { - var code = "module.exports = function (Component) { Component.options.__blog = '" + source + "' }" - return normalize(code) -} diff --git a/test/mock-loaders/css.js b/test/mock-loaders/css.js deleted file mode 100644 index fe5d6d1e2..000000000 --- a/test/mock-loaders/css.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (content) { - return content.replace(/#f00/, '#00f') -} diff --git a/test/mock-loaders/docs.js b/test/mock-loaders/docs.js deleted file mode 100644 index 6535363b9..000000000 --- a/test/mock-loaders/docs.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = function (source, map) { - this.callback(null, - `export default Component => { - Component.options.__docs = ${JSON.stringify(source)} - }`, - map) -} diff --git a/test/mock-loaders/html.js b/test/mock-loaders/html.js deleted file mode 100644 index 182d66e49..000000000 --- a/test/mock-loaders/html.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (content) { - return content.replace(/red/, 'green') -} diff --git a/test/mock-loaders/i18n.js b/test/mock-loaders/i18n.js deleted file mode 100644 index 718312e14..000000000 --- a/test/mock-loaders/i18n.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = function (source) { - var value = typeof source === 'string' ? JSON.parse(source) : source - var jsonString = JSON.stringify(value).replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029') - var code = 'module.exports = function (Component) { Component.options.__i18n = ' + JSON.stringify(jsonString) + ' }' - this.callback(null, code) -} 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/js.js b/test/mock-loaders/js.js deleted file mode 100644 index a0c719bb1..000000000 --- a/test/mock-loaders/js.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (content) { - return content.replace(/Hello from Component A!/, 'Changed!') -} 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/mock-loaders/yaml.js b/test/mock-loaders/yaml.js
deleted file mode 100644
index a27de0b5a..000000000
--- a/test/mock-loaders/yaml.js
+++ /dev/null
@@ -1,7 +0,0 @@
-var yaml = require('js-yaml')
-
-module.exports = function (source) {
- this.cacheable && this.cacheable()
- var res = yaml.safeLoad(source)
- return JSON.stringify(res)
-}
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(`