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. **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/getting-started.md b/docs/getting-started.md
new file mode 100644
index 000000000..beac721df
--- /dev/null
+++ b/docs/getting-started.md
@@ -0,0 +1,176 @@
+# Getting Started
+
+### Syntax Highlighting
+
+First thing first, you will probably want proper syntax highlighting for `*.vue` components. Currently there are syntax highlighting support for [Sublime Text](https://github.com/vuejs/vue-syntax-highlight), [Atom](https://atom.io/packages/language-vue) and [Vim](https://github.com/posva/vim-vue). Contributions for other editors/IDEs are highly appreciated! If you are not using any pre-processors in Vue components, you can also get by by treating `*.vue` files as HTML in your editor.
+
+### Project Structure
+
+We are going to walk through setting up a Webpack + `vue-loader` project from scratch. If you are interested in ready-to-run examples, check out [vue-loader-example](https://github.com/vuejs/vue-loader-example) and [vue-hackernews](https://github.com/vuejs/vue-hackernews). However, if you are not already a Webpack expert, I highly recommend going through the following tutorial to understand how the pieces fit together.
+
+A simple `vue-loader` based project structure looks like this:
+
+``` bash
+.
+├── index.html
+├── main.js
+├── components
+│ ├── App.vue
+│ ├── ComponentA.vue
+│ └── ComponentB.vue
+├── package.json
+└── webpack.config.js
+```
+
+### Installing Dependencies
+
+Before we write any code, we need to install the proper NPM dependencies. Let's run:
+
+``` bash
+# Create a package.json file.
+# fill in the questions as you desire.
+npm init
+
+# Install everything we need
+npm install\
+ webpack webpack-dev-server\
+ vue-loader vue-html-loader css-loader style-loader vue-hot-reload-api\
+ babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015\
+ babel-runtime@5\
+ --save-dev
+```
+
+That's a lot of dependencies, I know! This is mostly because `vue-loader` need to have other webpack loaders as **peer dependencies** rather than nested dependencies so that Webpack can find them.[^(1)]
+
+You may also notice that we are using `babel-runtime` version 5 instead of the latest 6.x - this is [intentional](https://github.com/vuejs/vue-loader/issues/96#issuecomment-162910917).
+
+After proper installation, your `package.json`'s `devDependencies` field should look like this:
+
+``` json
+...
+ "devDependencies": {
+ "babel-core": "^6.3.17",
+ "babel-loader": "^6.2.0",
+ "babel-plugin-transform-runtime": "^6.3.13",
+ "babel-preset-es2015": "^6.3.13",
+ "babel-runtime": "^5.8.34",
+ "css-loader": "^0.23.0",
+ "style-loader": "^0.13.0",
+ "vue-hot-reload-api": "^1.2.2",
+ "vue-html-loader": "^1.0.0",
+ "vue-loader": "^7.2.0",
+ "webpack": "^1.12.9",
+ "webpack-dev-server": "^1.14.0"
+ },
+...
+```
+
+### Configuring Webpack
+
+Here's the most basic Webpack configuration for `vue-loader`:
+
+``` js
+// webpack.config.js
+module.exports = {
+ // entry point of our application
+ entry: './main.js',
+ // where to place the compiled bundle
+ output: {
+ path: __dirname,
+ filename: 'build.js'
+ },
+ module: {
+ // `loaders` is an array of loaders to use.
+ // here we are only configuring vue-loader
+ loaders: [
+ {
+ test: /\.vue$/, // a regex for matching all files that end in `.vue`
+ loader: 'vue' // loader to use for matched files
+ }
+ ]
+ }
+}
+```
+
+With the above configuration, when you write the following in your JavaScript code:
+
+``` js
+var MyComponent = require('./my-component.vue')
+```
+
+Webpack knows it needs to pipe the contents of `./my-component.vue` through `vue-loader`, because the filename matches the regex we provided in the config.
+
+### Creating Other Files
+
+The app entry point, `main.js` typically looks like this:
+
+``` js
+// main.js
+var Vue = require('vue')
+// require a *.vue component
+var App = require('./components/App.vue')
+
+// mount a root Vue instance
+new Vue({
+ el: 'body',
+ components: {
+ // include the required component
+ // in the options
+ app: App
+ }
+})
+```
+
+Inside a `*.vue` component's `
+```
+
+Next, let's create an `index.html` that simply uses the bundled file:
+
+``` html
+
+
+ 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 `
-
-
-```
-
-Использование `vue-loader` предоставляет множество интересных возможностей:
-
-- Позволяет использовать разнообразные загрузчики webpack для разных секций компонента Vue, например Sass для `
-```
-
-Атрибут `module` подскажет Vue Loader о необходимости внедрить CSS модуль в компонент в качестве вычисляемого свойства с именем `$style`. Вы можете использовать его в шаблонах для динамического добавления классов:
-
-``` vue
-
- {{ docs }}
-- Текст должен быть красным -
- -``` - -Поскольку это вычисляемое свойство, оно будет работать с объектом/массивом в `: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/es2015.vue b/test/fixtures/es2015.vue deleted file mode 100644 index 5b2cb1ba5..000000000 --- a/test/fixtures/es2015.vue +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/test/fixtures/extend.vue b/test/fixtures/extend.vue deleted file mode 100644 index 9c4ac69a7..000000000 --- a/test/fixtures/extend.vue +++ /dev/null @@ -1,15 +0,0 @@ - -{{ msg }}
-
-
-
diff --git a/test/fixtures/extract-css-chunks.vue b/test/fixtures/extract-css-chunks.vue
deleted file mode 100644
index 80c5e182f..000000000
--- a/test/fixtures/extract-css-chunks.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/test/fixtures/extract-css.js b/test/fixtures/extract-css.js
new file mode 100644
index 000000000..ce602cf28
--- /dev/null
+++ b/test/fixtures/extract-css.js
@@ -0,0 +1 @@
+require('./extract-css.vue')
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/logo.png b/test/fixtures/logo.png
deleted file mode 100644
index 1b3356a74..000000000
Binary files a/test/fixtures/logo.png and /dev/null differ
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/media-query.js b/test/fixtures/media-query.js
new file mode 100644
index 000000000..1a292f332
--- /dev/null
+++ b/test/fixtures/media-query.js
@@ -0,0 +1 @@
+window.testModule = require('./media-query.vue')
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
deleted file mode 100644
index 0d4dd195b..000000000
--- a/test/fixtures/postcss.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/test/fixtures/pre.js b/test/fixtures/pre.js
new file mode 100644
index 000000000..2238f374f
--- /dev/null
+++ b/test/fixtures/pre.js
@@ -0,0 +1 @@
+window.testModule = require('./pre.vue')
diff --git a/test/fixtures/pre.vue b/test/fixtures/pre.vue
index c9303cb6e..2eafdb4fd 100644
--- a/test/fixtures/pre.vue
+++ b/test/fixtures/pre.vue
@@ -6,17 +6,14 @@ body
color primary-color
-
-div
- h1 This is the app
- comp-a
- comp-b
+
+h1 This is the app
+comp-a
+comp-b
-
diff --git a/test/fixtures/prettier-bug.vue b/test/fixtures/prettier-bug.vue
deleted file mode 100644
index 1ec01f0dc..000000000
--- a/test/fixtures/prettier-bug.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-
-
-
-
diff --git a/test/fixtures/resolve.vue b/test/fixtures/resolve.vue
deleted file mode 100644
index c98514eb1..000000000
--- a/test/fixtures/resolve.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- 
- 
-
-
-
-
diff --git a/test/fixtures/scoped-css.js b/test/fixtures/scoped-css.js
new file mode 100644
index 000000000..607e0d58f
--- /dev/null
+++ b/test/fixtures/scoped-css.js
@@ -0,0 +1 @@
+window.testModule = require('./scoped-css.vue')
diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue
index 09c01667d..9c9ec3059 100644
--- a/test/fixtures/scoped-css.vue
+++ b/test/fixtures/scoped-css.vue
@@ -8,58 +8,11 @@
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;
-}
-
-
-
-
-
-
+hi
hi
-yo
- -hi
hi
+yo
+ - - diff --git a/test/fixtures/script-import-entry.js b/test/fixtures/script-import-entry.js new file mode 100644 index 000000000..5c1491e49 --- /dev/null +++ b/test/fixtures/script-import-entry.js @@ -0,0 +1 @@ +window.testModule = require('./script-import.vue') 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/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.pug b/test/fixtures/template-import.jade
similarity index 100%
rename from test/fixtures/template-import.pug
rename to test/fixtures/template-import.jade
diff --git a/test/fixtures/template-import.js b/test/fixtures/template-import.js
new file mode 100644
index 000000000..9f39ecaea
--- /dev/null
+++ b/test/fixtures/template-import.js
@@ -0,0 +1 @@
+window.testModule = require('./template-import.vue')
diff --git a/test/fixtures/template-import.vue b/test/fixtures/template-import.vue
index 00de859d2..ce534539b 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(`