diff --git a/ru/guide/assets.md b/ru/guide/assets.md index 7510783e7..b3ec9d6f0 100644 --- a/ru/guide/assets.md +++ b/ru/guide/assets.md @@ -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 ``, `background: url(...)` and CSS `@import` are resolved as module dependencies. +По-умолчанию, [vue-loader](http://vue-loader.vuejs.org/en/) автоматически обрабатывает файлы стилей и шаблонов совместно с `css-loader` и компилятором шаблонов Vue. В этом процессе все URL файлов, такие как ``, `background: url(...)` и CSS `@import`, трактуются как модульные зависимости. -For example, we have this file tree: +Например, у нас следующая структура файлов: ```bash -| assets/ @@ -16,28 +16,28 @@ 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 ``` -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 [ @@ -45,7 +45,7 @@ Actually, Nuxt.js default loaders configuration is: test: /\.(png|jpe?g|gif|svg)$/, loader: 'url-loader', query: { - limit: 1000, // 1KO + limit: 1000, // 1 KO name: 'img/[name].[hash:7].[ext]' } }, @@ -60,9 +60,9 @@ 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 ``` -Will be generated into: +Будет преобразован в: ```html ``` -If you want to update these loaders or disable them, please take a look at the [loaders configuration](/api/configuration-build). +Если вы хотите обновить эти загрузчики или отключить их, пожалуйста, обратитесь к [конфигурации загрузчиков](/api/configuration-build). diff --git a/ru/guide/async-data.md b/ru/guide/async-data.md index 59c3e1894..f89a53f01 100644 --- a/ru/guide/async-data.md +++ b/ru/guide/async-data.md @@ -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. --- diff --git a/ru/guide/dynamic-routes.md b/ru/guide/dynamic-routes.md index da1bba3eb..479e4a82c 100644 --- a/ru/guide/dynamic-routes.md +++ b/ru/guide/dynamic-routes.md @@ -1,6 +1,6 @@ --- title: Динамическая маршрутизация -description: Чтобы объявить динамический маршрут с параметром (param) в Nuxt.js, необходимо создать Vue файл с префиксом: _ +description: Чтобы объявить динамический маршрут с параметром (param) в Nuxt.js, необходимо создать Vue файл с префиксом "_" --- > Чтобы объявить динамический маршрут с param, Вы должны определить файл Vue **с префиксом нижнее подчеркивание**. diff --git a/ru/guide/nested-routes.md b/ru/guide/nested-routes.md index 2e8c6b060..44fc5b4ee 100644 --- a/ru/guide/nested-routes.md +++ b/ru/guide/nested-routes.md @@ -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 **с таким же имеменем, как имя каталога**, которые содержат ваши дочерние представления. > Не забывайте писать `` в Вашем родительском файле Vue. -Эта струтура файлов: +Эта структура файлов: ```bash pages/ @@ -36,7 +37,7 @@ router: { ] } ``` -Сейчас Вы видите, что у дочерних элементов есть путь ':id?' который является дополнительным, но если Вы хотите сделать его обязательным, создайте 'index.vue' в каталоге 'users': +Видно, что у дочерних элементов есть путь `:id?`, который является дополнительным, но если вы хотите сделать его обязательным, создайте `index.vue` в каталоге `users`: ```bash pages/ @@ -72,6 +73,7 @@ router: { ``` ## Динамические вложенные пути + > Этот сценарий не так распространен, но с Nuxt.js он тоже возможен: наличие динамических дочерних элементов в динамических родителях. Эта структура файлов: diff --git a/ru/guide/pages.md b/ru/guide/pages.md index ef6e46435..4e5475587 100644 --- a/ru/guide/pages.md +++ b/ru/guide/pages.md @@ -5,11 +5,11 @@ description: Папка /pages позволяет создавать любой > Папка `pages` позволяет создавать любой вид маршрута, просто создавая Vue-файлы. Эти компоненты обладают свойствами, с помощью которых можно легко создавать и поддерживать приложение. -## Специальные ключи +## Специальные атрибуты Каждая страница — это компонент Vue, но Nuxt.js ещё добавляет и специальные ключи, чтобы сделать процесс разработки приложения как можно проще. -Список всех доступных ключей +Список всех доступных атрибутов | Атрибут | Описание | |-----------|-------------| diff --git a/ru/guide/plugins.md b/ru/guide/plugins.md index f283b19bd..6c9e15109 100644 --- a/ru/guide/plugins.md +++ b/ru/guide/plugins.md @@ -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. Это могут быть ваши собственные библиотеки или другие внешние модули. -
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.
+
Важно помнить, что в любом [жизненном цикле экземпляра Vue](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) только хуки `beforeCreate` и `created` вызываются **как на стороне клиента, так и стороне сервера**. Все другие хуки выхываются только на клиенской стороне.
-## 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