This repository has been archived by the owner on Sep 3, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 940
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from translation-gang/translation-ru
[MERGEME] [Community Translation] Russian Translation | Русский Перевод
- Loading branch information
Showing
59 changed files
with
3,520 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,3 +4,4 @@ node_modules | |
|
||
# logs | ||
npm-debug.log | ||
.DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
--- | ||
title: Конфигурация BUILD | ||
description: Nuxt.js позволяет конфигурировать опции webpack'а на ваше усмотрение. | ||
--- | ||
|
||
# Build | ||
|
||
> Nuxt.js позволяет конфигурировать опции webpack'а на ваше усмотрение. | ||
## build.vendor | ||
|
||
> Nuxt.js позволяет добавлять модули в генерируемый файл `vendor.bundle.js`, чтобы уменьшить размер финального приложения. Это действительно полезно при использовании внешних модулей (например, `axios`). | ||
Для добавления стороннего модуля/файла внутрь приложения, создайте параметр `build.vendor` внутри `nuxt.config.js`: | ||
|
||
```js | ||
module.exports = { | ||
build: { | ||
vendor: ['axios'] | ||
} | ||
} | ||
``` | ||
|
||
Вы можете также указать путь к файлу, например, к своей собственной библиотеке: | ||
```js | ||
module.exports = { | ||
build: { | ||
vendor: [ | ||
'axios', | ||
'~plugins/my-lib.js' | ||
] | ||
} | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
title: Конфигурация CACHE | ||
--- | ||
|
||
# Cache | ||
|
||
> Документация скоро будет |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
--- | ||
title: Конфигурация CSS | ||
description: Nuxt.js позволяет указать глобальные CSS-файлы/модули/библиотеки (подключённые к каждой странице). | ||
--- | ||
|
||
# CSS | ||
|
||
> Nuxt.js позволяет указать глобальные CSS-файлы/модули/библиотеки (подключённые к каждой странице). | ||
- Type: `Array` | ||
- `String | Object` | ||
|
||
Если элемент типа объект, то параметры следующие: | ||
- src: `String` (путь к файлу) | ||
- lang: `String` ([используется пре-процессор](/guide/pages#using-pre-processors)) | ||
|
||
В `nuxt.config.js` добавьте ресурсы CSS: | ||
|
||
```js | ||
module.exports = { | ||
css: [ | ||
// Загрузить модуль node.js | ||
'hover.css/css/hover-min.css', | ||
// модуль node.js, но с указанием пре-процессора | ||
{ src: 'bulma', lang: 'sass' }, | ||
// CSS-файл в проекте | ||
'~assets/css/main.css' | ||
] | ||
} | ||
``` | ||
|
||
<p class="Alert">**В продакшн-версии приложения** весь CSS-код будет минимизирован, скомпилирован в файл `styles.css` и добавлен в блок страницы `<head>`.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
title: Конфигурация ENV | ||
--- | ||
|
||
# Env | ||
|
||
> Документация скоро будет |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
title: Configuration GENERATE | ||
--- | ||
|
||
# Generate | ||
|
||
> Документация скоро будет |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
title: Конфигурация HEAD | ||
--- | ||
|
||
# Head | ||
|
||
> Документация скоро будет |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
title: Конфигурация LOADING | ||
--- | ||
|
||
# Loading | ||
|
||
> Документация скоро будет |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
title: Конфигурация PLUGINS | ||
--- | ||
|
||
# Plugins | ||
|
||
> Документация скоро будет |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
title: Конфигурация ROUTER | ||
--- | ||
|
||
# Router | ||
|
||
> Документация скоро будет |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
--- | ||
title: Модуль Nuxt.js | ||
description: можно использовать nuxt.js программно, как middleware для собственного web-сервера. | ||
--- | ||
|
||
# Программное использование Nuxt.js | ||
|
||
Вероятно, вы захотите использовать свой сервер со своим ПО и API. Для этого вы можете использовать Nuxt.js программно. | ||
Nuxt.js написан на ES2015, из-за чего его код приятен и хорошо читаем. Транспилеры не используются, и всю работу выполняет сам движок Core V8. Поэтому Nuxt.js требует Node.js версии `4.0` или выше. | ||
|
||
Подключить Nuxt.js можно так: | ||
```js | ||
const Nuxt = require('nuxt') | ||
``` | ||
|
||
### Опции Nuxt | ||
|
||
Чтобы узнать о возможных опциях для Nuxt.js, см. раздел конфигурации. | ||
```js | ||
const options = {} | ||
|
||
const nuxt = new Nuxt(options) | ||
nuxt.build() | ||
.then(() => { | ||
// Здесь можно использовать nuxt.render(req, res) или nuxt.renderRoute(route, context) | ||
}) | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
[ | ||
{ | ||
"title": "Модуль Nuxt", | ||
"links": [ | ||
{ "name": "Использование", "to": "" }, | ||
{ "name": "Render", "to": "/nuxt-render" }, | ||
{ "name": "RenderRoute", "to": "/nuxt-render-route" }, | ||
{ "name": "RenderAndGetWindow", "to": "/nuxt-render-and-get-window" } | ||
] | ||
}, | ||
{ | ||
"title": "Конфигурация", | ||
"links": [ | ||
{ "name": "Build", "to": "/configuration-build" }, | ||
{ "name": "Cache", "to": "/configuration-cache" }, | ||
{ "name": "CSS", "to": "/configuration-css" }, | ||
{ "name": "Env", "to": "/configuration-env" }, | ||
{ "name": "Generate", "to": "/configuration-generate" }, | ||
{ "name": "Head", "to": "/configuration-head" }, | ||
{ "name": "Loading", "to": "/configuration-loading" }, | ||
{ "name": "Plugins", "to": "/configuration-plugins" }, | ||
{ "name": "Router", "to": "/configuration-router" } | ||
] | ||
}, | ||
{ | ||
"title": "Страницы", | ||
"links": [ | ||
{ "name": "Контекст (Context)", "to": "/pages-context" } | ||
] | ||
} | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
title: Модуль Nuxt.js | ||
--- | ||
|
||
# nuxt.renderAndGetWindow() | ||
|
||
> Документация скоро будет |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
title: Модуль Nuxt.js | ||
--- | ||
|
||
# nuxt.renderRoute() | ||
|
||
> Документация скоро будет |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
--- | ||
title: Модуль Nuxt.js | ||
--- | ||
|
||
# nuxt.render(req, res) | ||
|
||
Вы можете использовать Nuxt.js с помощью `nuxt.render` для сервера node.js. | ||
|
||
Пример с Express.js: | ||
```js | ||
const app = require('express')() | ||
const Nuxt = require('nuxt') | ||
|
||
const nuxt = new Nuxt() | ||
nuxt.build() | ||
.then(() => { | ||
// Рендерить каждый маршрут с Nuxt.js | ||
app.use(nuxt.render) | ||
// Запустить сервер | ||
app.listen(3000) | ||
}) | ||
``` | ||
|
||
<p class="Alert">Рекомендуется вызываать **nuxt.render** в конце выполнения вашего кода, поскольку фреймворк отвечает за рендеринг вашего веб-приложения и не будет вызывать next()</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
--- | ||
title: Контекст страниц | ||
description: Контекст (context) — полезный объект с набором методов для абстракции клиент-серверного взаимодействия. | ||
--- | ||
|
||
# Контекст | ||
|
||
Список доступных ключей в свойстве `context`: | ||
|
||
| Ключ | Тип | Доступность | Описание | | ||
|-----|------|--------------|-------------| | ||
| `isClient` | Булевское | Клиент & сервер | Значение `true` указывает на то, что рендеринг происходит на стороне клиента. | | ||
| `isServer` | Булевское | Клиент & сервер | Значение `true` указывает на то, что рендеринг происходит на стороне сервера. | | ||
| `isDev` | Булевское | Клиент & сервер | Значение `true` указывает на то, что код выполняется в режиме разработки. Может быть полезно, когда необходимо кешировать данные в продакшн-версии. | | ||
| `route` | [Маршрут Vue](https://router.vuejs.org/en/api/route-object.html) | Клиент & сервер | экземпляр класса маршрута в `vue-router` [см. документацию](https://router.vuejs.org/en/api/route-object.html) | | ||
| `store` | [Хранилище Vuex](http://vuex.vuejs.org/en/api.html#vuexstore-instance-properties) | Клиент & сервер | Экземпляр `Vuex.Store`. **Доступен только в случае, когда `store: true` в `nuxt.config.js`** | | ||
| `env` | Объект | Клиент & сервер | Переменная окружения в `nuxt.config.js`, [см. API окружения](/api/configuration-env) | | ||
| `params` | Объект | Клиент & сервер | Псевдоним route.params | | ||
| `query` | Объект | Клиент & сервер | Псевдоним route.query | | ||
| `req` | [http.Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) | Сервер | Запрос от сервера node.js. Если nuxt используется в качестве промежуточного ПО, то объект `req` может отличаться в зависимости от выбранного фреймворка. *Не доступен через `nuxt generate`*. | | ||
| `res` | [http.Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) | Сервер | Ответ от сервера node.js. Если nuxt используется в качестве промежуточного ПО, то объект `res` может отличаться в зависимости от выбранного фреймворка. *Не доступен через `nuxt generate`*. | | ||
| `redirect` | Функция | Клиент & сервер | Используйте этот метод, чтобы перенаправить юзерана другой маршрут. Значение статуса запроса (status) используется на сервере, по-умолчанию — 302. `redirect([status,] path [, query])` | | ||
| `error` | Функция | Клиент & сервер | Используйте этот метод, чтобы показать страницу ошибки: `error(params)`. Объект `params`должен содержать свойства `statusCode` и `message`. | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
--- | ||
title: Async Datas | ||
description: Async Datas example with Nuxt.js | ||
github: async-data | ||
--- | ||
|
||
## Documentation | ||
|
||
### data (context) | ||
|
||
> Nuxt.js *supercharges* the `data` method from vue.js to let you handle async operation before setting the component data. | ||
`data` is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route. | ||
|
||
The `data` method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, Nuxt.js offers you 2 ways, choose the one you're the most familiar with: | ||
|
||
1. returning a `Promise`, Nuxt.js will wait for the promise to be resolved before rendering the Component | ||
2. Define a second argument which is a callback method to be called like this: `callback(err, data)` | ||
|
||
Example with returning a `Promise`: | ||
```js | ||
export default { | ||
data ({ params }) { | ||
return axios.get(`https://my-api/posts/${params.id}`) | ||
.then((res) => { | ||
return { title: res.data.title } | ||
}) | ||
} | ||
} | ||
``` | ||
|
||
Example with using the `callback` argument: | ||
```js | ||
export default { | ||
data ({ params }, callback) { | ||
axios.get(`https://my-api/posts/${params.id}`) | ||
.then((res) => { | ||
callback(null, { title: res.data.title }) | ||
}) | ||
} | ||
} | ||
``` | ||
|
||
And then, you can display the data inside your template: | ||
|
||
```html | ||
<template> | ||
<h1>{{ title }}</h1> | ||
</template> | ||
``` | ||
|
||
### Context | ||
|
||
List of all the available keys in `context`: | ||
|
||
| Key | Type | Available | Description | | ||
|-----|------|--------------|-------------| | ||
| `isClient` | Boolean | Client & Server | Boolean to let you know if you're actually renderer from the client-side | | ||
| `isServer` | Boolean | Client & Server | Boolean to let you know if you're actually renderer from the server-side | | ||
| `isDev` | Boolean | Client & Server | Boolean to let you know if you're in dev mode, can be useful for caching some data in production | | ||
| `route` | [vue-router route](https://router.vuejs.org/en/api/route-object.html) | Client & Server | `vue-router` route instance [see documentation](https://router.vuejs.org/en/api/route-object.html) | | ||
| `store` | [vuex store](http://vuex.vuejs.org/en/api.html#vuexstore-instance-properties) | Client & Server | `Vuex.Store` instance. **Available only if `store: true` is set in `nuxt.config.js`** | | ||
| `params` | Object | Client & Server | Alias of route.params | | ||
| `query` | Object | Client & Server | Alias of route.query | | ||
| `req` | [http.Request](https://nodejs.org/api/http.html#http_class_http_incomingmessage) | Server | Request from the node.js server. If nuxt is used as a middleware, the req object might be different depending of the framework you're using. | | ||
| `res` | [http.Response](https://nodejs.org/api/http.html#http_class_http_serverresponse) | Server | Response from the node.js server. If nuxt is used as a middleware, the res object might be different depending of the framework you're using. | | ||
| `redirect` | Function | Client & Server | Use this method to redirect the user to another route, the status code is used on the server-side, default to 302. `redirect([status,] path [, query])` | | ||
| `error` | Function | Client & Server | Use this method to show the error page: `error(params)`. The `params` should have the fields `statusCode` and `message`. | | ||
|
||
### Handling errors | ||
|
||
Nuxt.js add the `error(params)` method in the `context`, you can call it to display the error page. `params.statusCode` will be also used to render the proper status code form the server-side. | ||
|
||
Example with a `Promise`: | ||
```js | ||
export default { | ||
data ({ params, error }) { | ||
return axios.get(`https://my-api/posts/${params.id}`) | ||
.then((res) => { | ||
return { title: res.data.title } | ||
}) | ||
.catch((e) => { | ||
error({ statusCode: 404, message: 'Post not found' }) | ||
}) | ||
} | ||
} | ||
``` | ||
|
||
If you're using the `callback` argument, you can call it directly with the error, Nuxt.js will call the `error` method for you: | ||
```js | ||
export default { | ||
data ({ params }, callback) { | ||
axios.get(`https://my-api/posts/${params.id}`) | ||
.then((res) => { | ||
callback(null, { title: res.data.title }) | ||
}) | ||
.catch((e) => { | ||
callback({ statusCode: 404, message: 'Post not found' }) | ||
}) | ||
} | ||
} | ||
``` |
Oops, something went wrong.