Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Done] The rest of untranslated sections of the guide + fixes | Russian Translation | Русский перевод #8

Merged
merged 6 commits into from
Jan 10, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions ru/guide/assets.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: Assets
description: Nuxt uses vue-loader, file-loader and url-loader for Webpack by default for strong assets serving.
title: Файлы исходного кода
description: По-умолчанию, Nuxt.js использует vue-loader, file-loader и url-loader для Webpack'а, чтобы обрабатывать файлы с исходным кодом.
---

> Nuxt uses Webpack file-loader and url-loader by default for strong assets serving.
> По-умолчанию, Nuxt.js использует vue-loader, file-loader и url-loader для Webpack'а, чтобы обрабатывать файлы с исходным кодом.

By default, [vue-loader](http://vue-loader.vuejs.org/en/) automatically processes your style and template files with `css-loader` and the Vue template compiler. In this compilation process, all asset URLs such as `<img src="...">`, `background: url(...)` and CSS `@import` are resolved as module dependencies.
По-умолчанию, [vue-loader](http://vue-loader.vuejs.org/en/) автоматически обрабатывает файлы стилей и шаблонов совместно с `css-loader` и компилятором шаблонов Vue. В этом процессе все URL файлов, такие как `<img src="...">`, `background: url(...)` и CSS `@import`, трактуются как модульные зависимости.

For example, we have this file tree:
Например, у нас следующая структура файлов:

```bash
-| assets/
Expand All @@ -16,36 +16,36 @@ For example, we have this file tree:
----| index.vue
```

In my CSS, if I use `url('~assets/image.png')`, it will be translated into `require('~assets/image.png')`.
Если в CSS мы используем `url('~assets/image.png')`, то эта строчка будет преобразована в `require('~assets/image.png')`.

Or if in my `pages/index.vue`, I use:
Если код страницы `pages/index.vue` следующий:
```html
<template>
<img src="~assets/image.png">
</template>
```

It will be compiled into:
То он будет преобразован к виду:

```js
createElement('img', { attrs: { src: require('~assets/image.png') }})
```

Because `.png` is not a JavaScript file, nuxt.js configures Webpack to use [file-loader](https://github.com/webpack/file-loader) and [url-loader](https://github.com/webpack/url-loader) to handle them for you.
Из-за того, что `.png` — не JavaScript-файл, то Nuxt.js конфигурирует Webpack таким образом, чтобы [file-loader](https://github.com/webpack/file-loader) и [url-loader](https://github.com/webpack/url-loader) сделали преобразования вместо вас.

The benefits of them are:
- `file-loader` lets you designate where to copy and place the asset file, and how to name it using version hashes for better caching.
- `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce the amount of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`.
Это даёт нам следующие плюшки:
- `file-loader` позволяет указать, куда копировать файлс с исходным кодом и как его назвать с использованием хеша для правильного кеширования.
- `url-loader` позволяет (по условию) сконвертировать и включить содержимое файла в формате base-64 в случае, если его размер не превосходит допустимый размер. Подоный подход уменьшает количество HTTP-запросов при наличие обычных файлов. Если размер файла больше допустимого размера, процесс автоматически переходит к `file-loader`.

Actually, Nuxt.js default loaders configuration is:
Конфигурация Nuxt.js по-умолчанию следующая:

```js
[
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
query: {
limit: 1000, // 1KO
limit: 1000, // 1 KO
name: 'img/[name].[hash:7].[ext]'
}
},
Expand All @@ -60,19 +60,19 @@ Actually, Nuxt.js default loaders configuration is:
]
```

Which means that every file below 1 KO will be inlined as base-64 data URL. Otherwise, the image/font will be copied in its corresponding folder (under the `.nuxt` directory) with a name containing a version hashes for better caching.
Такая конфигурация означает, что каждый файл с размером, меньшим 1 KO, будет преобразован в формат base-64 и подставлен вместо URL. В противном случае, изображение/шрифт будут скопированы в соответствующую под-папку папки `.nuxt` и переименованы с использованием хеша, содержащего версию файла для правильного кеширования.

When launching our application with `nuxt`, our template in `pages/index.vue`:
При запуске приложения с помощью `nuxt`, шаблон `pages/index.vue`:

```html
<template>
<img src="~assets/image.png">
</template>
```

Will be generated into:
Будет преобразован в:
```html
<img src="/_nuxt/img/image.0c61159.png">
```

If you want to update these loaders or disable them, please take a look at the [loaders configuration](/api/configuration-build).
Если вы хотите обновить эти загрузчики или отключить их, пожалуйста, обратитесь к [конфигурации загрузчиков](/api/configuration-build).
1 change: 0 additions & 1 deletion ru/guide/async-data.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
---
title: Асинхронные данные
description: Nuxt.js supercharges the data method from vue.js to let you handle async operation before setting the component data.
description: Nuxt.js перехватывает метод data от vue.js, чтобы позволить обрабатать асинхронные задачи прежде, чем установить data.
---

Expand Down
2 changes: 1 addition & 1 deletion ru/guide/dynamic-routes.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Динамическая маршрутизация
description: Чтобы объявить динамический маршрут с параметром (param) в Nuxt.js, необходимо создать Vue файл с префиксом: _
description: Чтобы объявить динамический маршрут с параметром (param) в Nuxt.js, необходимо создать Vue файл с префиксом "_"
---

> Чтобы объявить динамический маршрут с param, Вы должны определить файл Vue **с префиксом нижнее подчеркивание**.
Expand Down
14 changes: 8 additions & 6 deletions ru/guide/nested-routes.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
---
title: Вложеные маршруты
description: Nuxt.js позволяет вам создавать вложенные маршруты при помощи дочерних путей vue-router.
title: Вложенные маршруты
description: Nuxt.js позволяет создавать вложенные маршруты при помощи дочерних путей vue-router.
---

> Nuxt.js позволяет Вам создавать вложенные маршруты при помощи дочерних путей vue-router.
> Nuxt.js позволяет создавать вложенные маршруты при помощи дочерних путей vue-router.

## Структура директорий
Чтобы определить вложенный маршрут, Вы должны создать файл Vue **с таким же имеменем как каталог** которые содержат Ваши дочерние представления.

Чтобы определить вложенный маршрут, вы должны создать файл Vue **с таким же имеменем, как имя каталога**, которые содержат ваши дочерние представления.
> Не забывайте писать `<nuxt-child></nuxt-child>` в Вашем родительском файле Vue.

Эта струтура файлов:
Эта структура файлов:

```bash
pages/
Expand All @@ -36,7 +37,7 @@ router: {
]
}
```
Сейчас Вы видите, что у дочерних элементов есть путь ':id?' который является дополнительным, но если Вы хотите сделать его обязательным, создайте 'index.vue' в каталоге 'users':
Видно, что у дочерних элементов есть путь `:id?`, который является дополнительным, но если вы хотите сделать его обязательным, создайте `index.vue` в каталоге `users`:

```bash
pages/
Expand Down Expand Up @@ -72,6 +73,7 @@ router: {
```

## Динамические вложенные пути

> Этот сценарий не так распространен, но с Nuxt.js он тоже возможен: наличие динамических дочерних элементов в динамических родителях.

Эта структура файлов:
Expand Down
4 changes: 2 additions & 2 deletions ru/guide/pages.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ description: Папка /pages позволяет создавать любой

> Папка `pages` позволяет создавать любой вид маршрута, просто создавая Vue-файлы. Эти компоненты обладают свойствами, с помощью которых можно легко создавать и поддерживать приложение.

## Специальные ключи
## Специальные атрибуты

Каждая страница — это компонент Vue, но Nuxt.js ещё добавляет и специальные ключи, чтобы сделать процесс разработки приложения как можно проще.

Список всех доступных ключей
Список всех доступных атрибутов

| Атрибут | Описание |
|-----------|-------------|
Expand Down
42 changes: 21 additions & 21 deletions ru/guide/plugins.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
title: Plugins
description: Nuxt.js allows you to define js plugins to be ran before instantiating the root vue.js application, it can be to use your own library or external modules.
title: Плагины
description: Nuxt.js позволяет подключать JS-плагины, которые будут запущены перед созданием экземпляра корневого приложения Vue.js. Это могут быть ваши собственные библиотеки или другие внешние модули.
---

> Nuxt.js allows you to define js plugins to be ran before instantiating the root vue.js application, it can be to use your own library or external modules.
> Nuxt.js позволяет подключать JS-плагины, которые будут запущены перед созданием экземпляра корневого приложения Vue.js. Это могут быть ваши собственные библиотеки или другие внешние модули.

<div class="Alert">It is important to know that in any Vue [instance lifecycle](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram), only `beforeCreate` and `created` hooks are called **both from client-side and server-side**. All other hooks are called only from the client-side.</div>
<div class="Alert">Важно помнить, что в любом [жизненном цикле экземпляра Vue](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) только хуки `beforeCreate` и `created` вызываются **как на стороне клиента, так и стороне сервера**. Все другие хуки выхываются только на клиенской стороне.</div>

## Use External Modules
## Использование внешних модулей

We may want to use external modules in our application, one great example is [axios](https://github.com/mzabriskie/axios) for making HTTP request for both server and client.
Вероятно, вы захотите использовать внешние модули в приложении. Хороший пример для создания HTTP-запросов как для клиентской стороны, так и для серверной — [axios](https://github.com/mzabriskie/axios).

We install it via NPM:
Установим модуль `axios` через NPM:

```bash
npm install --save axios
```

Then, we can use it directly in our pages:
Далее мы можем использовать его в приложении:

```html
<template>
Expand All @@ -36,7 +36,7 @@ export default {
</script>
```

But there is **one problem here**, if we import axios in another page, it will be included again for the page bundle. We want to include `axios` only once in our application, for this, we use the `build.vendor` key in our `nuxt.config.js`:
Однако существует **единственная проблема**: если подключить модуль на другой странице, он будет повторно добавлен в финальный код приложения. Мы же хотим подключить `axios` лишь единожды, поэтому будем использовать свойство `build.vendor` в файле `nuxt.config.js`:

```js
module.exports = {
Expand All @@ -46,32 +46,32 @@ module.exports = {
}
```

Then, I can import `axios` anywhere without having to worry about making the bundle bigger!
После чего мы может испортировать `axios` в любом месте без проблем, размер финального кода приложения не увеличится.

## Use Vue Plugins
## Использование плагинов Vue

If we want to use [vue-notifications](https://github.com/se-panfilov/vue-notifications) to display notification in our application, we need to setup the plugin before launching the app.
Если мы хотим использовать [vue-notifications](https://github.com/se-panfilov/vue-notifications) для отображения уведомлений, нам нужно установить плагин до запуска приложения.

File `plugins/vue-notifications.js`:
Файл `plugins/vue-notifications.js`:
```js
import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)
```

Then, we add the file inside the `plugins` key of `nuxt.config.js`:
Затем в `nuxt.config.js` мы добавляем ссылку на файл плагина в свойстве `plugins`:
```js
module.exports = {
plugins: ['~plugins/vue-notifications']
}
```

To learn more about the `plugins` configuration key, check out the [plugins api](/api/configuration-plugins).
Чтобы узнать больше о свойстве `plugins` в конфигурации проекта, взгляните на [API плагинов](/api/configuration-plugins).

Actually, `vue-notifications` will be included in the app bundle, but because it's a library, we want to include it in the vendor bundle for better caching.
Вообще, `vue-notifications` будет добавлен к финальному коду вашего приложения, но поскольку это библиотека, мы бы предпочли добавить код плагина в отдельный файл, содержащий код и возможных других внешних библиотек.

We can update our `nuxt.config.js` to add `vue-notifications` in the vendor bundle:
Для этого добавим значение `vue-notifications` в файл `nuxt.config.js` в свойство `buid.vendor`:
```js
module.exports = {
build: {
Expand All @@ -81,11 +81,11 @@ module.exports = {
}
```

## Only for Browsers
## Только для браузеров

Some plugins might work **only for the browser**, you can use the `process.BROWSER_BUILD` variable to check if the plugin will run from the client-side.
Некоторые плагины могут работать **только в браузерах**. Вы можете использовать переменную `process.BROWSER_BUILD`, чтобы проверить, что плагин будет работать на стороне клиента.

Example:
Пример:
```js
import Vue from 'vue'
import VueNotifications from 'vue-notifications'
Expand All @@ -95,4 +95,4 @@ if (process.BROWSER_BUILD) {
}
```

In case you need to require some libraries only for the server, you can use the `process.SERVER_BUILD` variable set to `true` when webpack is creating the `server.bundle.js` file.
Если вам нужны некоторые библиотеки только для серверной стороны, вы можете использовать переменную `process.SERVER_BUILD` во время того, как webpack создаёт файл `server.bundle.js`.
Loading