diff --git a/docs/LANGS.md b/docs/LANGS.md index 60a72c858..ab4640e05 100644 --- a/docs/LANGS.md +++ b/docs/LANGS.md @@ -1,3 +1,4 @@ * [English](en/) -* [Português](pt/) -* [한국어](kr/) \ No newline at end of file +* [한국어](kr/) +* [Русский](ru/) +* [Português](pt/) \ No newline at end of file diff --git a/docs/ru/README.md b/docs/ru/README.md new file mode 100644 index 000000000..4b8ddbde5 --- /dev/null +++ b/docs/ru/README.md @@ -0,0 +1,38 @@ +# Введение + +### Что такое `vue-loader`? + +`vue-loader` – это загрузчик для Webpack, который преобразует Vue компоненты, написанные в следующем формате в обычные JavaScript модули: + +![screenshot](http://blog.evanyou.me/images/vue-component.png) + +`vue-loader` предлагает множество полезных возможностей: + +- Поддержка ES2015 по умолчанию; +- Позволяет использовать разные загрузчики Webpack для разных частей Vue компонента, например, SASS для ` +``` + +#### webpack.config.js + +``` js +// Webpack 2.x +var ExtractTextPlugin = require("extract-text-webpack-plugin") + +module.exports = { + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue', + options: { + loaders: { + // извлечь всё содержимое тегов как обычный текст + 'docs': ExtractTextPlugin.extract('raw-loader'), + } + } + } + ], + plugins: [ + // вывести всю документацию в отдельный файл + new ExtractTextPlugin('docs.md') + ] + } +} +``` \ No newline at end of file diff --git a/docs/ru/configurations/extract-css.md b/docs/ru/configurations/extract-css.md new file mode 100644 index 000000000..0664bf186 --- /dev/null +++ b/docs/ru/configurations/extract-css.md @@ -0,0 +1,70 @@ +# Извлечение CSS в отдельный файл + +Пример конфигурации для извлечения CSS из всех компонентов Vue в отдельный CSS-файл: + +### Webpack 2.x + +``` bash +npm install extract-text-webpack-plugin@2.x --save-dev +``` + +``` js +// webpack.config.js +var ExtractTextPlugin = require("extract-text-webpack-plugin") + +module.exports = { + // другие настройки... + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + loaders: { + css: ExtractTextPlugin.extract({ + use: 'css-loader', + fallback: 'vue-style-loader' // <- это внутренняя часть vue-loader, поэтому нет необходимости его устанавливать через NPM + }) + } + } + }, + ] + }, + plugins: [ + new ExtractTextPlugin("style.css") + ] +} +``` + +### Webpack 1.x + +``` bash +npm install extract-text-webpack-plugin --save-dev +``` + +``` js +// webpack.config.js +var ExtractTextPlugin = require("extract-text-webpack-plugin") + +module.exports = { + // другие настройки... + module: { + loaders: [ + { + test: /\.vue$/, + loader: 'vue' + } + ] + }, + vue: { + loaders: { + css: ExtractTextPlugin.extract("css"), + // вы также можете добавить +``` + +В недрах, текстовое содержимое тега ` +``` + +Обратите внимание, это сделает ваш компонент Vue зависимым от Webpack и несовместимым с Browserify и [vueify](https://github.com/vuejs/vueify). **Если вы планируете распространять ваш компонент Vue, избегайте использования этого синтаксиса.** diff --git a/docs/ru/features/css-modules.md b/docs/ru/features/css-modules.md new file mode 100644 index 000000000..d73760a90 --- /dev/null +++ b/docs/ru/features/css-modules.md @@ -0,0 +1,117 @@ +# CSS модули + +> требуется версия 9.8.0 или выше + +[CSS модули](https://github.com/css-modules/css-modules) — это популярная система для модульности и компоновки CSS. `vue-loader` предоставляет первоклассную интеграцию с CSS модулями как возможную альтернативу эмулируемого scoped CSS. + +### Использование + +Просто добавьте атрибут `module` к тегу ` +``` + +Это включит режим CSS-модулей в `css-loader`, и полученный индентификатор объекта класса будет внедрен в компонент как вычисляемое свойство с именем `$style`. Вы можете использовать его в своих шаблонах для динамического добавления классов: + +``` html + +``` + +Поскольку это вычисляемое свойство, оно также будет работает с объектом/массивом в `: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). При использовании ` + + +``` + +В что-то подобное: + +``` html + + + +``` + +#### Примечания + +1. Вы можете использовать в компоненте локальные и глобальные стили одновременно: + + ``` html + + + + ``` + +2. Корневой тег компонента потомка будет попадать под область видимости родительского локального CSS и своего локального CSS. + +3. Partials не затрагиваются локальными стилями. + +4. **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](http://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно. + +5. **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу. diff --git a/docs/ru/options.md b/docs/ru/options.md new file mode 100644 index 000000000..4855dbcf9 --- /dev/null +++ b/docs/ru/options.md @@ -0,0 +1,187 @@ +# Перечень настроек + +## Отличия в использовании с Webpack 1 & 2 + +Для Webpack 2: настройки можно передавать непосредственно в правилах загрузчиков. + +``` js +module.exports = { + // ... + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + // настройки vue-loader + } + } + ] + } +} +``` + +Для Webpack 1.x: добавить блок `vue` в корень конфигурации Webpack: + +``` js +module.exports = { + // ... + vue: { + // настройки vue-loader + } +} +``` + +### loaders + +- Тип: `{ [lang: string]: string }` + + Объект определяющий какие загрузчики Webpack переопределят стандартные загрузчики, используемые для обработки секций `*.vue` файлов. Ключ соответствует атрибуту `lang` у секции файла, если таковой был указан. Значения `lang` по умолчанию: + + - `