From 0b618a51d37dd630914303d9768f120ecab4909d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80=20?= =?UTF-8?q?=D0=A1=D0=BE=D0=BA=D0=BE=D0=BB=D0=BE=D0=B2?= Date: Thu, 19 Jan 2017 16:13:03 +0300 Subject: [PATCH 01/64] - Initial commit --- docs/ru/README.md | 37 ++++++ docs/ru/SUMMARY.md | 20 +++ docs/ru/configurations/advanced.md | 56 ++++++++ docs/ru/configurations/asset-url.md | 23 ++++ docs/ru/configurations/extract-css.md | 70 ++++++++++ docs/ru/configurations/pre-processors.md | 81 ++++++++++++ docs/ru/features/css-modules.md | 117 +++++++++++++++++ docs/ru/features/es2015.md | 65 ++++++++++ docs/ru/features/hot-reload.md | 7 + docs/ru/features/postcss.md | 54 ++++++++ docs/ru/features/scoped-css.md | 51 ++++++++ docs/ru/options.md | 157 +++++++++++++++++++++++ docs/ru/start/setup.md | 13 ++ docs/ru/start/spec.md | 92 +++++++++++++ docs/ru/workflow/linting.md | 93 ++++++++++++++ docs/ru/workflow/production.md | 39 ++++++ docs/ru/workflow/testing-with-mocks.md | 70 ++++++++++ docs/ru/workflow/testing.md | 101 +++++++++++++++ 18 files changed, 1146 insertions(+) create mode 100644 docs/ru/README.md create mode 100644 docs/ru/SUMMARY.md create mode 100644 docs/ru/configurations/advanced.md create mode 100644 docs/ru/configurations/asset-url.md create mode 100644 docs/ru/configurations/extract-css.md create mode 100644 docs/ru/configurations/pre-processors.md create mode 100644 docs/ru/features/css-modules.md create mode 100644 docs/ru/features/es2015.md create mode 100644 docs/ru/features/hot-reload.md create mode 100644 docs/ru/features/postcss.md create mode 100644 docs/ru/features/scoped-css.md create mode 100644 docs/ru/options.md create mode 100644 docs/ru/start/setup.md create mode 100644 docs/ru/start/spec.md create mode 100644 docs/ru/workflow/linting.md create mode 100644 docs/ru/workflow/production.md create mode 100644 docs/ru/workflow/testing-with-mocks.md create mode 100644 docs/ru/workflow/testing.md diff --git a/docs/ru/README.md b/docs/ru/README.md new file mode 100644 index 000000000..2bb3116c8 --- /dev/null +++ b/docs/ru/README.md @@ -0,0 +1,37 @@ +# Introduction + +### What is `vue-loader`? + +`vue-loader` is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module: + +![screenshot](http://blog.evanyou.me/images/vue-component.png) + +There are many cool features provided by `vue-loader`: + +- ES2015 enabled by default; +- Allows using other Webpack loaders for each part of a Vue component, for example SASS 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/ru/features/css-modules.md b/docs/ru/features/css-modules.md new file mode 100644 index 000000000..af9fb3d66 --- /dev/null +++ b/docs/ru/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 + +``` + +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 ` + + +``` + +Into the following: + +``` html + + + +``` + +#### 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/ru/options.md b/docs/ru/options.md new file mode 100644 index 000000000..ccffacf70 --- /dev/null +++ b/docs/ru/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-loader', + 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: + + - `