+ Home page
+
+
+
+
+```
+
+And then we add the CSS animation for this custom transition:
+```css
+/* assets/main.css */
+.bounce-enter-active {
+ animation: bounce-in .8s;
+}
+.bounce-leave-active {
+ animation: bounce-out .5s;
+}
+@keyframes bounce-in {
+ 0% { transform: scale(0) }
+ 50% { transform: scale(1.5) }
+ 100% { transform: scale(1) }
+}
+@keyframes bounce-out {
+ 0% { transform: scale(1) }
+ 50% { transform: scale(1.5) }
+ 100% { transform: scale(0) }
+}
+```
+
+*Note: you can also the set `transition` key as an object in page components*
diff --git a/ru/examples/seo-html-head.md b/ru/examples/seo-html-head.md
new file mode 100644
index 000000000..2737259c6
--- /dev/null
+++ b/ru/examples/seo-html-head.md
@@ -0,0 +1,82 @@
+---
+title: SEO HTML Head
+description: SEO HTML Head example with Nuxt.js
+github: head-elements
+---
+
+## Documentation
+
+Nuxt.js uses [`vue-meta`](https://github.com/declandewet/vue-meta) to update the `headers` and `html attributes` of your applications.
+
+Nuxt.js configures `vue-meta` with these options:
+```js
+{
+ keyName: 'head', // the component option name that vue-meta looks for meta info on.
+ attribute: 'n-head', // the attribute name vue-meta adds to the tags it observes
+ ssrAttribute: 'n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
+ tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
+}
+```
+
+### Updating the title
+
+To update the title of the page, just add `head.title` in your page component.
+
+`pages/index.vue`
+```html
+
+ About page
+Home page 🚀
+ + + +``` + +### Meta tags and more + +To know the list of options you can give to `head`, take a look at [`vue-meta` documentation](https://github.com/declandewet/vue-meta#recognized-metainfo-properties). + +### Using `data` values inside `head` + +You might want to use the component data to display different headers, like a post title for example. Just use `head` as a function and you can use `this` inside to access your component data. + +Example of displaying the post title: +```html + +``` + +### Defaults metas + +Nuxt.js let you define all the defaults metas for your application inside the `nuxt.config.js`, use the same field `head`: +```js +module.exports = { + head: { + titleTemplate: '%s - Nuxt.js', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { hid: 'description', name: 'description', content: 'Meta description' } + ] + } +} +``` diff --git a/ru/examples/testing.md b/ru/examples/testing.md new file mode 100644 index 000000000..e9cf8757f --- /dev/null +++ b/ru/examples/testing.md @@ -0,0 +1,26 @@ +--- +title: Testing +description: Testing example with Nuxt.js +github: with-ava +--- + +## Documentation + +[`ava`](https://github.com/avajs/ava) is a powerful JavaScript testing framework, mixed with [`jsdom`](https://github.com/tmpvar/jsdom), we can use them to do end-to-end testing easily for `nuxt` applications. + +```bash +npm install --save-dev ava jsdom +``` + +Add test script to the `package.json` + +__package.json__ + +```javascript +// ... +"scripts": { + "test": "ava", +} +// ... + +``` diff --git a/ru/examples/vuex-store.md b/ru/examples/vuex-store.md new file mode 100644 index 000000000..49445cc9f --- /dev/null +++ b/ru/examples/vuex-store.md @@ -0,0 +1,89 @@ +--- +title: Vuex Store +description: Vuex Store example with Nuxt.js +github: vuex-store +--- + +## Documentation + +> Using a store to manage the state is important to every big application, that's why nuxt.js implement Vuex in its core. + +### Activating the store + +Nuxt.js will try to `require('./store/index.js')`, if exists, it will import `Vuex`, add it to the vendors and add the `store` option to the root `Vue` instance. + +### Create the store folder + +Let's create a file `store/index.js`: + +```js +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +const store = new Vuex.Store({ + state: { + counter: 0 + }, + mutations: { + increment (state) { + state.counter++ + } + } +}) + +export default store +``` + +> We don't need to install `Vuex` since it's shipped with nuxt.js + +### Voilà ! + +We can now use `this.$store` inside our `.vue` files. + +```html + + + +``` + +### fetch (context) + +> Used to fill the store before rendering the page + +The `fetch` method, *if set*, 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 `fetch` method receives the context as the first argument, we can use it to fetch some data and fill the store. To make the fetch method asynchronous, **return a Promise**, nuxt.js will wait for the promise to be resolved before rendering the Component. + +For example: +```js +export default { + fetch ({ store, params }) { + return axios.get('http://my-url') + .then((res) => { + store.commit('setUser', res.data) + }) + } +} +``` + +### Context + +To see the list of available keys in `context`, take a look at [this example](examples/async-datas). + +### Action `nuxtServerInit` + +If we define the action `nuxtServerInit` in our store, Nuxt.js will call it with the context. It can be useful when having some data on the server we want to give directly to the client-side, for example, the authenticated user: +```js +// store/index.js +actions: { + nuxtServerInit ({ commit }, { req }) { + if (req.authUser) { + commit('user', req.authUser) + } + } +} +``` + +The context given to `nuxtServerInit` is the same as the `data` of `fetch` method except `context.redirect()` and `context.error()` are omitted. diff --git a/ru/faq/heroku-deployment.md b/ru/faq/heroku-deployment.md new file mode 100644 index 000000000..9aece69b0 --- /dev/null +++ b/ru/faq/heroku-deployment.md @@ -0,0 +1,40 @@ +--- +title: Развёртывание с Heroku +description: Как развернуть Nuxt на Heroku? +--- + +# Развёртывание с Heroku + +Мы рекомендуем прочитать [документацию Heroku для node.js](https://devcenter.heroku.com/articles/nodejs-support). + +Сперва вам нужно сказать Heroku установить `devDependencies` проекта (чтобы иметь возможность запускать `npm run build`): +```bash +heroku config:set NPM_CONFIG_PRODUCTION=false +``` + +Кроме того, хотелось бы чтобы наше приложение было запущено в production-режиме и слушало хост `0.0.0.0`: +```bash +heroku config:set HOST=0.0.0.0 +heroku config:set NODE_ENV=production +``` + +В панели управления (Dashboard) Heroku (в секции Settings) в увидите что-то вроде этого: + + + +Затем мы говорим Heroku запустить `npm run build` через скрипт `heroku-postbuild` в нашем `package.json`: +```js +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "heroku-postbuild": "npm run build" +} +``` + +Наконец, мы можем добавить приложение в Heroku: +```bash +git push heroku master +``` + +Voilà! Ваше nuxt.js-приложение размещено на Heroku! \ No newline at end of file diff --git a/ru/faq/index.md b/ru/faq/index.md new file mode 100644 index 000000000..64d5fd5ee --- /dev/null +++ b/ru/faq/index.md @@ -0,0 +1,46 @@ +--- +title: Внешние ресурсы +description: Как использовать внешние ресурсы с Nuxt.js? +--- + +# Как использовать внешние ресурсы? + +## Глобальные настройки + +Включите ваши ресурсы в файле nuxt.config.js: + +```js +module.exports = { + head: { + script: [ + { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' } + ], + link: [ + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } + ] + } +} +``` + +## Локальные настройки + +Включите ваши ресурсы в файле .vue в каталоге pages: + +```html + +Страница About, использующая jQuery и шрифт Roboto
+ + + +``` diff --git a/ru/faq/menu.json b/ru/faq/menu.json new file mode 100644 index 000000000..2c0780dfb --- /dev/null +++ b/ru/faq/menu.json @@ -0,0 +1,10 @@ +[ + { + "title": "Часто Задаваемые Вопросы", + "links": [ + { "name": "Как использовать внешние ресурсы?", "to": "" }, + { "name": "Как добавить плагины PostCSS?", "to": "/postcss-plugins" }, + { "name": "Как развернуться на Heroku?", "to": "/heroku-deployment" } + ] + } +] diff --git a/ru/faq/postcss-plugins.md b/ru/faq/postcss-plugins.md new file mode 100644 index 000000000..bf048e9d3 --- /dev/null +++ b/ru/faq/postcss-plugins.md @@ -0,0 +1,20 @@ +--- +title: Плагины Postcss +description: Как добавить плагины Postcss? +--- + +# Как добавить плагины Postcss? + +В вашем файле конфигурации nuxt.config.js укажите: + +```js +module.exports = { + build: { + postcss: [ + require('postcss-nested')(), + require('postcss-responsive-type')(), + require('postcss-hexrgba')(), + ] + } +} +``` diff --git a/ru/guide/assets.md b/ru/guide/assets.md new file mode 100644 index 000000000..b3ec9d6f0 --- /dev/null +++ b/ru/guide/assets.md @@ -0,0 +1,78 @@ +--- +title: Файлы исходного кода +description: По-умолчанию, Nuxt.js использует vue-loader, file-loader и url-loader для Webpack'а, чтобы обрабатывать файлы с исходным кодом. +--- + +> По-умолчанию, Nuxt.js использует vue-loader, file-loader и url-loader для Webpack'а, чтобы обрабатывать файлы с исходным кодом. + +По-умолчанию, [vue-loader](http://vue-loader.vuejs.org/en/) автоматически обрабатывает файлы стилей и шаблонов совместно с `css-loader` и компилятором шаблонов Vue. В этом процессе все URL файлов, такие как `
+
+```
+
+То он будет преобразован к виду:
+
+```js
+createElement('img', { attrs: { src: require('~assets/image.png') }})
+```
+
+Из-за того, что `.png` — не JavaScript-файл, то Nuxt.js конфигурирует Webpack таким образом, чтобы [file-loader](https://github.com/webpack/file-loader) и [url-loader](https://github.com/webpack/url-loader) сделали преобразования вместо вас.
+
+Это даёт нам следующие плюшки:
+- `file-loader` позволяет указать, куда копировать файлс с исходным кодом и как его назвать с использованием хеша для правильного кеширования.
+- `url-loader` позволяет (по условию) сконвертировать и включить содержимое файла в формате base-64 в случае, если его размер не превосходит допустимый размер. Подоный подход уменьшает количество HTTP-запросов при наличие обычных файлов. Если размер файла больше допустимого размера, процесс автоматически переходит к `file-loader`.
+
+Конфигурация Nuxt.js по-умолчанию следующая:
+
+```js
+[
+ {
+ test: /\.(png|jpe?g|gif|svg)$/,
+ loader: 'url-loader',
+ query: {
+ limit: 1000, // 1 KO
+ name: 'img/[name].[hash:7].[ext]'
+ }
+ },
+ {
+ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+ loader: 'url-loader',
+ query: {
+ limit: 1000, // 1 KO
+ name: 'fonts/[name].[hash:7].[ext]'
+ }
+ }
+]
+```
+
+Такая конфигурация означает, что каждый файл с размером, меньшим 1 KO, будет преобразован в формат base-64 и подставлен вместо URL. В противном случае, изображение/шрифт будут скопированы в соответствующую под-папку папки `.nuxt` и переименованы с использованием хеша, содержащего версию файла для правильного кеширования.
+
+При запуске приложения с помощью `nuxt`, шаблон `pages/index.vue`:
+
+```html
+
+
+
+```
+
+Будет преобразован в:
+```html
+
+```
+
+Если вы хотите обновить эти загрузчики или отключить их, пожалуйста, обратитесь к [конфигурации загрузчиков](/api/configuration-build).
diff --git a/ru/guide/async-data.md b/ru/guide/async-data.md
new file mode 100644
index 000000000..6460ba981
--- /dev/null
+++ b/ru/guide/async-data.md
@@ -0,0 +1,114 @@
+---
+title: Асинхронные данные
+description: Nuxt.js перехватывает метод data от vue.js, чтобы позволить обрабатать асинхронные задачи прежде, чем установить data.
+---
+
+>Nuxt.js *перехватывает* метод 'data' от vue.js, чтобы позволить обрабатывать асинхронные задачи прежде, чем установить data
+
+## Метод `data`
+
+`data` будет вызван каждый раз прежде, чем загрузить компонент (**только для компонентов страниц (pages)**). Это будет вызвано со стороны сервера или перед тем, как переместиться к соответствующему маршруту. Этот метод получает [контекст](/api/pages-context) как первый параметр, Вы можете использовать его, чтобы выбрать некоторые данные и возвратить составляющие данные.
+
+**НЕЛЬЗЯ** получить доступ к полноценному контексту `this` внутри `data` потому что это вызывается **перед инициализацией** текущего компонента, т.е в самом начале.
+
+Чтобы сделать метод `data` асинхронным, nuxt.js предлагает Вам различные пути, выберите тот, который более знаком:
+
+1. Вернуть `Promise`, nuxt.js будет ожидать обещания, которое будет resolved (разрешено) прежде, чем отобразить компонент.
+2. Использовать [async/await](https://github.com/lukehoban/ecmascript-asyncawait) ([Подробности](https://zeit.co/blog/async-and-await))
+3. Указать колбэк как второй параметр. Колбэк будет вызван как: `callback(err, data)`
+
+### Вернуть Promise
+```js
+export default {
+ data ({ params }) {
+ return axios.get(`https://my-api/posts/${params.id}`)
+ .then((res) => {
+ return { title: res.data.title }
+ })
+ }
+}
+```
+
+### Используя async/await
+```js
+export default {
+ async data ({ params }) {
+ let { data } = await axios.get(`https://my-api/posts/${params.id}`)
+ return { title: data.title }
+ }
+}
+```
+
+### Используя callback
+```js
+export default {
+ data ({ params }, callback) {
+ axios.get(`https://my-api/posts/${params.id}`)
+ .then((res) => {
+ callback(null, { title: res.data.title })
+ })
+ }
+}
+```
+
+### Возврат объекта
+
+Если не надо делать никакого асинхронного вызова, то можно просто возвратить объект:
+
+```js
+export default {
+ data (context) {
+ return { foo: 'bar' }
+ }
+}
+```
+
+### Отображение данных
+
+Когда метод `data` установлен, можно отобразить данные внутри вашего шаблона также как и раньше:
+
+```html
+
+ {{ title }}
+ +``` + +## Контекст + +Для просмотра списка доступных ключей в 'контексте', смотрите на [API контекста страниц](/api/pages-context). + +## Обработка ошибок + +Nuxt.js добавит `error(params)` метод в `контекст`, и Вы сможете отобразить ошибки на странице. Также `params.statusCode` будет использован сервером чтобы указать реальный статус в заголовках ответа + +Пример с `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' }) + }) + } +} +``` + +Если Вы используете параметр 'callback', Вы можете вызвать его непосредственно с нужной ошибкой, и тогда nuxt.js вызовет 'ошибочный' метод: +```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' }) + }) + } +} +``` + +Чтобы настроить ошибочную страницу, смотрите на [раздел Layout](/guide/layouts#error-page). diff --git a/ru/guide/basic-routes.md b/ru/guide/basic-routes.md new file mode 100644 index 000000000..184b2c853 --- /dev/null +++ b/ru/guide/basic-routes.md @@ -0,0 +1,40 @@ +--- +title: Основы маршрутизации +description: Nuxt.js использует файловую систему для генерации маршрутов веб-приложения, это также просто как в PHP. +--- + +Nuxt.js автоматически генерирует конфигурацию [vue-router](https://github.com/vuejs/vue-router) согласно структуре файлов и каталогов в директории `pages` + +Структура файлов: + +```bash +pages/ +--| team/ +-----| index.vue +-----| about.vue +--| index.vue +``` + +автоматически сгенерирует: + +```js +router: { + routes: [ + { + name: 'index', + path: '/', + component: 'pages/index.vue' + }, + { + name: 'team', + path: '/team', + component: 'pages/team/index.vue' + }, + { + name: 'team-about', + path: '/team/about', + component: 'pages/team/about.vue' + } + ] +} +``` diff --git a/ru/guide/commands.md b/ru/guide/commands.md new file mode 100644 index 000000000..db5ff5cf2 --- /dev/null +++ b/ru/guide/commands.md @@ -0,0 +1,87 @@ +--- +title: Команды +description: Nuxt.js поставляется с набором полезных команд как для разрабатываемого, так и для финального продукта. +--- + +> Nuxt.js поставляется с набором полезных команд как для разрабатываемого, так и для финального продукта. + +## Список команд + +| Команда | Описание | +|---------|-------------| +| nuxt | Запустить сервер разработки [localhost:3000](http://localhost:3000) с горячей заменой модулей (hot-reloading). | +| nuxt build | Собрать приложение webpack'ом и минифицировать JS & CSS (для продакшн-версии). | +| nuxt start | Запустить сервер в продакшн-режиме (сперва необходимо запустить `nuxt build`). | +| nuxt generate | Собрать приложение и сгенерировать каждый маршрут в виде HTML файла (используется в случае статического хостинга). | + + +Вы должны добавить эти команды в файл `package.json`: + +```json +"scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate" "nuxt generate" +} +``` + +Затем вы можете запускать команды с помощью `npm runВ случае генерации веб-приложения через `nuxt generate`, [контекст](/api/pages-context), определённый для [data()](/guide/async-data#the-data-method) и [fetch()](/guide/vuex-store#the-fetch-method), не будет содержать `req` и `res`.
diff --git a/ru/guide/configuration.md b/ru/guide/configuration.md
new file mode 100644
index 000000000..e19084457
--- /dev/null
+++ b/ru/guide/configuration.md
@@ -0,0 +1,61 @@
+---
+title: Конфигурация
+description: Поставляемая по-умолчанию конфигурация Nuxt.js покрывает большую часть потребностей. Однако, файл настроек nuxt.config.js даёт возможность изменить её.
+---
+
+> Поставляемая по-умолчанию конфигурация Nuxt.js покрывает большую часть потребностей. Однако, файл настроек `nuxt.config.js` даёт возможность изменить её.
+
+### build
+
+Опция позволяет добавлять модули в генерируемый файл `vendor.bundle.js`, чтобы уменьшить размер финального приложения. Это действительно удобно при использовании внешних модулей.
+
+[Документация по build](/api/configuration-build)
+
+### cache
+
+Опция позволяет включить кешируемые компоненты для улучшения быстродействия.
+
+[Документация по cache](/api/configuration-cache)
+
+### css
+
+Опция позволяет определить файлы CSS/модули/библиотеки, которые вы хотите установить в качестве глобальных (подключенных к каждой странице).
+
+[Документация по css](/api/configuration-css)
+
+### env
+
+Опция позволяет определить переменные окружения для обоих клиентской и серверной сторон.
+
+[Документация по env](/api/configuration-env)
+
+### generate
+
+Опция позволяет определить значения параметров для всех динамических маршрутов в вашем приложении, которые Nuxt.js трансформирует в HTML-файлы.
+
+[Документация по generate](/api/configuration-generate)
+
+### head
+
+Опция позволяет определить все мета-значения по-умолчанию в вашем приложении.
+
+[Документация по integration](/api/configuration-head)
+
+### loading
+
+Опция позволяет настроить компонент индикатора загрузки, который используется по-умолчанию в Nuxt.js при переходе между маршрутами.
+
+[Документация по loading](/api/configuration-loading)
+
+### plugins
+
+Опция позволяет указать JavaScript-плагины, которые вы хотите запустить перед
+созданием экземпляра корневого приложения vue.js.
+
+[Документация по plugins](/api/configuration-plugins)
+
+### router
+
+Опция позволяет переписать конфигурацию vue-маршрутизатора, поставляемую по-умолчанию в Nuxt.js.
+
+[Документация по router](/api/configuration-router)
diff --git a/ru/guide/contribution-guide.md b/ru/guide/contribution-guide.md
new file mode 100644
index 000000000..f0e3bd734
--- /dev/null
+++ b/ru/guide/contribution-guide.md
@@ -0,0 +1,19 @@
+---
+title: Помощь в разработке
+description: Мы ценим любую помощь в разработке Nuxt.js!
+---
+
+> Мы ценим любую помощь в разработке Nuxt.js!
+
+## Отчёт о проблемах
+
+Неоценимая помощь при разработке проекта — отправка детализированных отчётов о возникаемых ошибках. Вы всегда рады получать грамотно написанные отчёты и очень благодарны за это! Перед тем, как отправить отчёт, пожалуйста, прочитайте внимательно документацию и постарайтесь найти ответ на возникшую проблему в существующем списке https://github.com/nuxt/nuxt.js/issues.
+
+## Пулл-реквесты
+
+Мы бы очень хотели получать пулл-реквесты от вас, даже если это небольшая правка какой-либо опечатки. Любые более значимые запросы на улучшение должны быть внесены [в список запросов GitHub](https://github.com/nuxt/nuxt.js/issues), чтобы над ними началась работа.
+
+### Соглашения
+
+- Для фикса: ветка должна быть названа в виде `fix-XXX`, где XXX — номер существующего запроса в списке, или название того, что именно фикс делает.
+- Для нового функционала: ветка должна быть названа в виде `feature-XXX`, где XXX — номер существующего запроса из списка.
diff --git a/ru/guide/custom-loading.md b/ru/guide/custom-loading.md
new file mode 100644
index 000000000..fa52a543d
--- /dev/null
+++ b/ru/guide/custom-loading.md
@@ -0,0 +1,99 @@
+---
+title: Индикатор загрузки
+description: Nuxt.js использует свой компонент для отображения прогресса загрузки для переходов между маршрутами. Вы можете изменить его, отключить или создать собственный.
+---
+
+> Nuxt.js использует свой компонент для отображения прогресса загрузки для переходов между маршрутами. Вы можете изменить его, отключить или создать собственный.
+
+## Отключение индикатора загрузки
+
+Если вы не хотите отображать индикатор загрузки в переходах между маршрутами, просто установите `loading: false` в файле `nuxt.config.js`:
+
+```js
+module.exports = {
+ loading: false
+}
+```
+
+## Изменение индикатора загрузки
+
+Список параметров для изменения индикатора загрузки.
+
+| Ключ | Тип | По-умолчанию | Описание |
+|-----|------|---------|-------------|
+| `color` | String | `'black'` | CSS-цвет индикатора загрузки |
+| `failedColor` | String | `'red'` | CSS-цвет индикатора загрузки в случае возникновения ошибки при рендеринге маршрута (например, если методы `data` или `fetch` вернули ошибку). |
+| `height` | String | `'2px'` | Высота индикатора загрузки (используется в свойстве `style` индикатора) |
+| `duration` | Number | `5000` | В мс, максимальная продолжительность работы индикатора. Nuxt.js предполагает, что маршрут будет отрендерен в течение 5 сек. |
+
+Для создания синего индикатора загрузки высотой 5 пикселей, измените `nuxt.config.js` следующим образом:
+
+```js
+module.exports = {
+ loading: {
+ color: 'blue',
+ height: '5px'
+ }
+}
+```
+
+## Создание собственного индикатора
+
+Вы можете создать собственный компонент, который Nuxt.js будет отображать вместо своего. Для этого просто укажите путь к компоненту в параметре `loading`.
+
+**Ваш собственный компонент должен содержать некоторые из следующих методов:**
+
+| Метод | Обязательный | Описание |
+|--------|----------|-------------|
+| `start()` | Да | Вызывается при изменении текущего маршрута, чтобы отобразить индикатор. |
+| `finish()` | Да | Вызывается, когда маршрут и его данные загружены, чтобы скрыть индикатор. |
+| `fail()` | *Нет* | Вызывается, когда маршрут не может быть загружен (например, ошибка загрузки данных). |
+| `increase(num)` | *Нет* | Вызывается во время загрузки компонента маршрута, `num` — число < 100. |
+
+Мы можем создать собственный индикатор в `components/loading.vue`:
+```html
+
+
+
+
+
+
+
+
+```
+
+Затем указываем в `nuxt.config.js` параметр `loading`:
+
+```js
+module.exports = {
+ loading: 'components/loading.vue'
+}
+```
diff --git a/ru/guide/directory-structure.md b/ru/guide/directory-structure.md
new file mode 100644
index 000000000..ac7404c74
--- /dev/null
+++ b/ru/guide/directory-structure.md
@@ -0,0 +1,89 @@
+---
+title: Структура каталогов
+description: Структура каталогов приложения Nuxt.js по умолчанию содержит все необходимое для максимально удобного начала разработки как больших так и маленьких приложений
+---
+
+> Структура каталогов приложения Nuxt.js по умолчанию содержит все необходимое для максимально удобного начала разработки как больших так и маленьких приложений. Однако, вы также можете и изменить её под свои нужды.
+
+## Каталоги
+
+### Каталог `assets`
+
+Каталог `assets` содержит нескомпилированные файлы с исходным кодом, такие как LESS, SASS, или JavaScript.
+
+[Больше документации о Assets](/guide/assets)
+
+### Каталог `components`
+
+Каталог `components` содержит Ваши Vue.js компоненты. Nuxt.js не подгружает метод `data` на этих компонентах. (от переводчика: Речь об [асинхронной подгрузке `data`](/guide/async-data))
+
+### Каталог `layouts`
+
+Каталог `layouts` содержит в себе шаблоны приложения
+
+_Этот каталог не может быть переименован._
+
+[Больше документации о Layouts](/guide/layouts)
+
+### Каталог `middleware`
+
+_Скоро будет_
+
+### Каталог `pages`
+
+Папка `pages` содержит представления (views) и маршруты (routes). Фреймворк считывает все файлы `.vue` внутри папки и создает маршрутизатор для вашего приложения.
+
+_Этот каталог не может быть переименован._
+
+[Подробнее о страницах](/guide/pages)
+
+### Каталог `plugins`
+
+Каталог `plugins` содержит javascript-плагины, запускаемые перед созданием экземпляра корневого приложения vue.js.
+
+[Подробнее о плагинах](/guide/plugins)
+
+### Каталог `static`
+
+Каталог `static` содержит Ваши статические файлы. Каждый файл в этом каталоге доступен через `/`.
+
+**Пример:** /static/robots.txt будет доступен как /robots.txt
+
+_Этот каталог не может быть переименован._
+
+[Подробнее о статике](/guide/static)
+
+### Каталог `store`
+
+Каталог `store` может содержать файлы [Vuex хранилища](http://vuex.vuejs.org). Vuex хранилище является опциональным в Nuxt.js. Для того что-бы использовать его, создайте файл `index.js` в этом каталоге, и Vuex будет активирован фреймворком автоматически.
+
+_Этот каталог не может быть переименован._
+
+[Подробнее о работе с хранилищем](/guide/vuex-store)
+
+
+### Файл nuxt.config.js
+
+Файл `nuxt.config.js` содержит пользовательскую конфигурацию Nuxt.js.
+
+_Этот файл не может быть переименован._
+
+[Подробнее о nuxt.config.js](/guide/configuration)
+
+### Файл package.json
+
+Файл `package.json` содержит список зависимостей и команды для вашего приложения.
+
+_Этот файл не может быть переименован._
+
+## Псевдонимы
+
+| Псевдоним | Каталог |
+|-----|------|
+| ~ | / |
+| ~assets | /assets |
+| ~components | /components |
+| ~pages | /pages |
+| ~plugins | /plugins |
+| ~static | /static |
+| ~store | /store |
diff --git a/ru/guide/dynamic-routes.md b/ru/guide/dynamic-routes.md
new file mode 100644
index 000000000..479e4a82c
--- /dev/null
+++ b/ru/guide/dynamic-routes.md
@@ -0,0 +1,59 @@
+---
+title: Динамическая маршрутизация
+description: Чтобы объявить динамический маршрут с параметром (param) в Nuxt.js, необходимо создать Vue файл с префиксом "_"
+---
+
+> Чтобы объявить динамический маршрут с param, Вы должны определить файл Vue **с префиксом нижнее подчеркивание**.
+
+## Структура директорий
+
+Структура файлов:
+
+```bash
+pages/
+--| users/
+-----| _id.vue
+-----| index.vue
+```
+
+автоматически сгенерирует:
+
+```js
+router: {
+ routes: [
+ {
+ name: 'users',
+ path: '/users',
+ component: 'pages/users/index.vue'
+ },
+ {
+ name: 'users-id',
+ path: '/users/:id',
+ component: 'pages/users/_id.vue'
+ }
+ ]
+}
+```
+
+## Валидация параметров пути
+
+```js
+validate({ params, query }) {
+ return true // если этот параметр валиден
+ return false // остановит Nuxt.js, чтобы отобразить маршрут и вывести на экран страницу ошибки
+}
+```
+
+Nuxt.js позволяет Вам определять метод проверки валидности в своем динамическом компоненте пути (В этом примере: `pages/users/_id.vue`).
+Если метод валидации не возвратит `true`, Nuxt.js автоматически отобразит страницу с ошибкой 404.
+
+```js
+
+```
diff --git a/ru/guide/eslint.md b/ru/guide/eslint.md
new file mode 100644
index 000000000..b6669906f
--- /dev/null
+++ b/ru/guide/eslint.md
@@ -0,0 +1,8 @@
+---
+title: ESLint
+description: Nuxt.js интегрируется с ESLint, чтобы с лёгкостью поддерживать наилучшее качество кода веб-приложения.
+---
+
+> Nuxt.js интегрируется с ESLint, чтобы с лёгкостью поддерживать наилучшее качество кода веб-приложения.
+
+*Документация скоро будет*
diff --git a/ru/guide/html-head.md b/ru/guide/html-head.md
new file mode 100644
index 000000000..42dd0addf
--- /dev/null
+++ b/ru/guide/html-head.md
@@ -0,0 +1,93 @@
+---
+title: HTML Мета теги
+description: Nuxt.js использует vue-meta для обновления содержимого headers и html атрибутов приложения.
+---
+
+Nuxt.js использует [vue-meta](https://github.com/declandewet/vue-meta) для обновления содержимого headers и html атрибутов приложения.
+
+Nuxt.js конфигурирует `vue-meta` с такими опциями:
+```js
+{
+ keyName: 'head', // имя опции указанное в компоненте, в котором vue-meta ищет meta информацию.
+ attribute: 'n-head', // название атрибута vue-meta добавляемое к тегам, за которыми он наблюдает
+ ssrAttribute: 'n-head-ssr', // название атрибута, которое позволяет vue-meta понимать, что meta информация уже была представлена сервером
+ tagIDKeyName: 'hid' // имя свойства, на основе которого vue-meta определит, перезаписать или добавить тег (Аналог id)
+}
+```
+
+## Заголовок (title)
+
+Чтобы обновить заголовок страницы, просто добавьте 'head.title' в своем компоненте страницы.
+
+Установим название страницы 'pages/index.vue':
+
+```html
+
+ Загрузка...
+Домашнаяя страница
+ + + +``` + +## Мета теги + +Чтобы понять весь список опций кдоступных для `head` прочтите [vue-meta документацию](https://github.com/declandewet/vue-meta#recognized-metainfo-properties). + +К примеру установим свой viewport и шрифт из Google font: +```js +head: { + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' } + ], + link: [ + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } + ] +} +``` + +## Используя `data` компонента + +Можно использовать `data` компонента, чтобы выводить на экран различные динамические заголовки, например такой как заголовок статьи. Просто используйте 'head' как функцию, и Вы можете использовать 'this' внутри этой функции чтобы получить доступ к `data`. + +Пример вывода заголовка статьи: +```html + +``` + +## Meta - базовые значения +Nuxt.js позволяет определить базовое значение meta для всего приложения в 'nuxt.config.js', используя свойство 'head': + +```js +module.exports = { + head: { + titleTemplate: '%s - Nuxt.js', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { hid: 'description', name: 'description', content: 'Мета описание' } + ] + } +} +``` + +Чтобы избежать любого дублирования, в дочернем компоненте, дайте уникальный идентификатор со 'скрытым' ключом, [читать побробнее](https://github.com/declandewet/vue-meta#lists-of-tags).
diff --git a/ru/guide/index.md b/ru/guide/index.md new file mode 100644 index 000000000..87b5cee8d --- /dev/null +++ b/ru/guide/index.md @@ -0,0 +1,97 @@ +--- +title: Введение +description: "25 октября 2016 команда zeit.co анонсировала Next.js — фреймворк для приложений на React с серверным рендерингом. Через несколько часов после этого объявления родился Nuxt.js — воплощение аналогичной идеи для Vue.js." +--- + +> 25 октября 2016 команда [zeit.co](https://zeit.co/) анонсировала [Next.js](https://zeit.co/blog/next), фреймворк для приложений на React с серверным рендерингом. Через несколько часов после этого объявления родился **Nuxt.js** — воплощение аналогичной идеи для [Vue.js](https://vuejs.org). + +## Что такое Nuxt.js? + +Nuxt.js — это фреймворк для универсальных приложений на Vue.js. + +Основной задачей этого фреймворка является **рендеринг пользовательского интерфейса** в условиях абстракции от клиент-серверной архитектуры. + +Наша цель — создать фреймворк настолько гибкий, чтобы его можно было использовать и как основу, и как дополнение к уже существующим проектам на Node.js. + +Nuxt.js содержит все необходимые конфигурационные заготовки, позволяющие сделать разработку приложений **с серверным рендерингом** на Vue.js лёгкой и приятной. + +Кроме того, мы также предоставляем другую опцию разработки: *nuxt generate*. С помощью неё можно **статически генерировать** приложения на Vue.js. +На наш взгляд, эта опция может оказаться следующим большим шагом на пути разработки микросервисных веб-приложений. + +Как фреймворк, Nuxt.js привносит множество возможностей, помогающих разработке, таких как: асинхронные данные, middleware, шаблоны и др. + +## Как это работает + + + +Nuxt.js использует следующие элементы для создания современных веб-приложений: +- [Vue 2](https://github.com/vuejs/vue) +- [Vue-Router](https://github.com/vuejs/vue-router) +- [Vuex](https://github.com/vuejs/vuex) (только при использовании [опции store](/guide/vuex-store)) +- [Vue-Meta](https://github.com/declandewet/vue-meta) + +Общий размер составляет всего лишь **28kb min+gzip** (31kb при использовании vuex). + +Под капотом мы используем [Webpack](https://github.com/webpack/webpack) с [vue-Loader](https://github.com/vuejs/vue-loader) и [babel-loader](https://github.com/babel/babel-loader) для сборки, разделения и минимизации кода. + +## Возможности + +- Написание Vue-файлов +- Автоматическое разделение кода +- Серверный рендеринг +- Мощная система маршрутизации с асинхронными данными +- Обслуживание статических файлов +- Транспиляция ES6/ES7 +- Сборка и минимизация JS & CSS +- Управление элементами в блоке head +- Горячая замена модулей при разработке +- Интеграция c ESLint +- Пре-процессоры: SASS, LESS, Stylus, и др. + +## Серверный рендеринг + +Nuxt.js можно использовать как фреймворк для организации всех этапов рендеринга UI в вашем проекте. + +Выполнение команды `nuxt` запускает сервер разработки, поддерживающий горячую замену модулей и полностью сконфигурированный серверный рендеринг вашего приложения. + +Взгляните на документацию [имеющихся команд](/guide/commands), чтобы узнать больше. + +Если же сервер у вас уже есть, Nuxt.js можно включить как middleware — ограничений нет никаких. См. руководство по [программному использованию Nuxt.js](/api). + +## Статическая генерация + +Большая инновация Nuxt.js скрыта в команде `nuxt generate`. + +Эта команда генерирует HTML-представление для каждого маршрута и сохраняет их в соответствующие файлы. + +Пример: + +```bash +-| pages/ +----| about.vue +----| index.vue +``` + +Будет сгенерировано: +``` +-| dist/ +----| about/ +------| index.html +----| index.html +``` + +Таким образом, появляется возможность размещения созданного приложения на статическом хостинге! + +Сам данный сайт, сгенерированный статически и размещённый на Github Pages, является отличным примером этого подхода: +- [Исходный код](https://github.com/nuxt/nuxtjs.org) +- [Сгенерированный код](https://github.com/nuxt/nuxtjs.org/tree/gh-pages) + +Генерировать HTML вручную при каждом обновлении [репозитория документации](https://github.com/nuxt/docs) мы, разумеется, не хотим, так что каждый пуш вызывает лямбда-функцию AWS, которая: +1. Клонирует [репозиторий nuxtjs.org](https://github.com/nuxt/nuxtjs.org) +2. Устанавливает зависимости через `npm install` +3. Вызывает `nuxt generate` +4. Пушит получившуюся папку `dist` в ветку `gh-pages` + +Таким образом, у нас теперь есть **безсерверное статически-генерируемое веб-приложение** :) + +Неудержимая мысль влечёт нас дальше: представьте интернет-магазин, созданный посредством `nuxt generate` и размещённый на CDN. Каждый раз, когда товар заканчивается на складе, мы регенерируем приложение, но если во время этого процесса кто-то использует наше приложение — всё будет актуально благодаря запросам к API интернет-магазина. Больше нет нужды во множественных серверах и кешировании! diff --git a/ru/guide/installation.md b/ru/guide/installation.md new file mode 100644 index 000000000..53eb6cf4a --- /dev/null +++ b/ru/guide/installation.md @@ -0,0 +1,93 @@ +--- +title: Установка +description: Начать работу с Nuxt.js действительно очень легко. Простой проект требует лишь указания зависимости `nuxt` в package.json. +--- + +> Начать работу с Nuxt.js действительно очень легко. Простой проект требует лишь указания зависимости `nuxt` в package.json. + +## Использование стартового шаблона Nuxt.js + +Для быстрого запуска приложения команда Nuxt.js создала [стартовый шаблон](https://github.com/nuxt/starter). + +[Скачайте .zip](https://github.com/nuxt/starter/archive/source.zip), или установите стартовый шаблон с помощью vue-cli: + +```bash +$ vue init nuxt/starterNuxt.js отслеживает изменения файлов внутри папки `pages`, поэтому перезапускать приложение после добавления новых страниц не нужно.
+ +Узнать больше о структуре папок проекта можно в разделе [Структура папок](/guide/directory-structure). + +## Создание с нуля + +Начать приложение Nuxt.js с нуля также очень просто — необходимы лишь *1 файл и 1 папка*. +Давайте создадим новую папку: + +```bash +$ mkdirHello world!
+ +``` + +и запустите приложение: +```bash +$ npm run dev +``` +Теперь приложение доступно по адресу http://localhost:3000 + +Nuxt.js отслеживает изменения файлов внутри папки `pages`, поэтому перезапускать приложение после добавления новых страниц не нужно.
+ +Узнать больше о структуре папок проекта можно в разделе [Структура папок](/guide/directory-structure). diff --git a/ru/guide/layouts.md b/ru/guide/layouts.md new file mode 100644 index 000000000..f4ec0c21e --- /dev/null +++ b/ru/guide/layouts.md @@ -0,0 +1,71 @@ +--- +title: Шаблоны +description: Nuxt.js позволяет расширять основной шаблон и создавать собственные, просто добавляя их в папку /layouts. +--- + +> Nuxt.js позволяет расширять основной шаблон и создавать собственные, просто добавляя их в папку `layouts`. + +## Основной шаблон + +> Вы можете расширить основной шаблон, добавив файл `layouts/default.vue`. + +*Убедитесь в том, что компонент `
+ Вернуться на главную
+
+
+
+
+```
+
+## Индивидуальный шаблон
+
+> Каждый файл *первого уровня* в папке `layouts` будет создавать индивидуальный шаблон, доступный через свойство `layout` в компоненте страницы.
+
+*Убедитесь в том, что компонент `Страница не найдена
+Произошла ошибка
+
+
+
+```
+
+Затем в `pages/posts.vue` вы можете сказать Nuxt.js использовать созданный шаблон:
+```html
+
+```
+
+Смотрите живой пример в [демонстрационном видео](https://www.youtube.com/watch?v=YOKnSTp7d38).
diff --git a/ru/guide/menu.json b/ru/guide/menu.json
new file mode 100644
index 000000000..c904aec75
--- /dev/null
+++ b/ru/guide/menu.json
@@ -0,0 +1,337 @@
+[
+ {
+ "title": "Начало работы",
+ "links": [
+ {
+ "name": "Введение",
+ "to": "",
+ "contents": [
+ {
+ "name": "Что такое Nuxt.js?",
+ "to": "#what-is-nuxt-js-"
+ },
+ {
+ "name": "Как это работает",
+ "to": "#how-it-works"
+ },
+ {
+ "name": "Особенности",
+ "to": "#features"
+ },
+ {
+ "name": "Серверный рендеринг",
+ "to": "#server-rendered"
+ },
+ {
+ "name": "Генерация статики",
+ "to": "#static-generated"
+ }
+ ]
+ },
+ {
+ "name": "Установка",
+ "to": "/installation",
+ "contents": [
+ {
+ "name": "Использование стартового шаблона Nuxt.js",
+ "to": "#using-nuxt-js-starter-template"
+ },
+ {
+ "name": "Приложение с нуля",
+ "to": "#starting-from-scratch"
+ }
+ ]
+ },
+ {
+ "name": "Структура папок",
+ "to": "/directory-structure",
+ "contents": [
+ {
+ "name": "Папки",
+ "to": "#directories"
+ },
+ {
+ "name": "Псевдонимы",
+ "to": "#aliases"
+ }
+ ]
+ },
+ {
+ "name": "Конфигурация",
+ "to": "/configuration"
+ },
+ {
+ "name": "Команды",
+ "to": "/commands",
+ "contents": [
+ {
+ "name": "Список команд",
+ "to": "#list-of-commands"
+ },
+ {
+ "name": "Развёртывание на продакшн-сервере",
+ "to": "#production-deployment"
+ },
+ {
+ "name": "Развёртывание на статичном хостинге",
+ "to": "#static-hosting-deployment"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "title": "Маршрут",
+ "links": [
+ {
+ "name": "Базовые маршруты",
+ "to": "/basic-routes"
+ },
+ {
+ "name": "Динамические маршруты",
+ "to": "/dynamic-routes",
+ "contents": [
+ {
+ "name": "Структура папок",
+ "to": "#directory-structure"
+ },
+ {
+ "name": "Валидация параметров маршрутов",
+ "to": "#validate-route-params"
+ }
+ ]
+ },
+ {
+ "name": "Вложенные маршруты",
+ "to": "/nested-routes",
+ "contents": [
+ {
+ "name": "Структура папок",
+ "to": "#directory-structure"
+ },
+ {
+ "name": "Динамические вложенные маршруты",
+ "to": "#dynamic-nested-routes"
+ }
+ ]
+ },
+ {
+ "name": "Переходы маршрутов",
+ "to": "/routes-transitions",
+ "contents": [
+ {
+ "name": "Использование",
+ "to": "#usage"
+ },
+ {
+ "name": "The transition Key",
+ "to": "#the-transition-key"
+ },
+ {
+ "name": "Переход для конкретной страницы",
+ "to": "#transition-for-a-specific-page"
+ },
+ {
+ "name": "Динамический переход",
+ "to": "#dynamic-transition"
+ }
+ ]
+ },
+ {
+ "name": "Middleware",
+ "to": "/routes-middleware"
+ }
+ ]
+ },
+ {
+ "title": "Представления",
+ "links": [
+ {
+ "name": "Страницы",
+ "to": "/pages",
+ "contents": [
+ {
+ "name": "Специальные ключи",
+ "to": "#special-keys"
+ },
+ {
+ "name": "Простая страница",
+ "to": "#a-simple-page"
+ },
+ {
+ "name": "Использование пре-процессоров",
+ "to": "#using-pre-processors"
+ },
+ {
+ "name": "Использование JSX",
+ "to": "#using-jsx"
+ }
+ ]
+ },
+ {
+ "name": "Шаблоны",
+ "to": "/layouts",
+ "contents": [
+ {
+ "name": "Основной шаблон",
+ "to": "#default-layout"
+ },
+ {
+ "name": "Страница ошибки",
+ "to": "#error-page"
+ },
+ {
+ "name": "Индивидуальный шаблон",
+ "to": "#custom-layout"
+ }
+ ]
+ },
+ {
+ "name": "Индикатор загрузки",
+ "to": "/custom-loading",
+ "contents": [
+ {
+ "name": "Отключение индикатора загрузки",
+ "to": "#disable-the-progress-bar"
+ },
+ {
+ "name": "Изменение индикатора загрузки",
+ "to": "#customize-the-progress-bar"
+ },
+ {
+ "name": "Создание своего индикатора загрузки",
+ "to": "#use-a-custom-loading-component"
+ }
+ ]
+ },
+ {
+ "name": "HTML Head",
+ "to": "/html-head",
+ "contents": [
+ {
+ "name": "Заголовок (title)",
+ "to": "#title"
+ },
+ {
+ "name": "Мета-теги",
+ "to": "#meta-tags"
+ },
+ {
+ "name": "Использование данных страницы",
+ "to": "#using-page-data"
+ },
+ {
+ "name": "Meta-значения по-умолчанию",
+ "to": "#defaults-meta"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "title": "Данные",
+ "links": [
+ {
+ "name": "Асинхронные данные",
+ "to": "/async-data",
+ "contents": [
+ {
+ "name": "Метод data",
+ "to": "#the-data-method"
+ },
+ {
+ "name": "Контекст (context)",
+ "to": "#the-context"
+ },
+ {
+ "name": "Обработка ошибок",
+ "to": "#handling-errors"
+ }
+ ]
+ },
+ {
+ "name": "Хранилище Vuex store",
+ "to": "/vuex-store",
+ "contents": [
+ {
+ "name": "Активация хранилища",
+ "to": "#activate-the-store"
+ },
+ {
+ "name": "Modules Files",
+ "to": "#modules-files"
+ },
+ {
+ "name": "Метод fetch",
+ "to": "#the-fetch-method"
+ },
+ {
+ "name": "Контекст (context)",
+ "to": "#the-context"
+ },
+ {
+ "name": "Действие nuxtServerInit",
+ "to": "#the-nuxtserverinit-action"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "title": "Ресурсы",
+ "links": [
+ {
+ "name": "Файлы исходного кода",
+ "to": "/assets"
+ },
+ {
+ "name": "Статические файлы",
+ "to": "/static"
+ },
+ {
+ "name": "Плагины",
+ "to": "/plugins",
+ "contents": [
+ {
+ "name": "Использование внешних модулей",
+ "to": "#use-external-modules"
+ },
+ {
+ "name": "Использование плагинов Vue",
+ "to": "#use-vue-plugins"
+ },
+ {
+ "name": "Только для браузеров",
+ "to": "#only-for-browsers"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "title": "Иструменты разработчика",
+ "links": [
+ {
+ "name": "ESLint",
+ "to": "/eslint"
+ },
+ {
+ "name": "Модульное тестирование",
+ "to": "/unit-testing"
+ }
+ ]
+ },
+ {
+ "title": "Разное",
+ "links": [
+ {
+ "name": "Помощь в разработке",
+ "to": "/contribution-guide"
+ },
+ {
+ "name": "Примечания к релизам",
+ "to": "/release-notes"
+ }
+ ]
+ }
+]
diff --git a/ru/guide/nested-routes.md b/ru/guide/nested-routes.md
new file mode 100644
index 000000000..44fc5b4ee
--- /dev/null
+++ b/ru/guide/nested-routes.md
@@ -0,0 +1,132 @@
+---
+title: Вложенные маршруты
+description: Nuxt.js позволяет создавать вложенные маршруты при помощи дочерних путей vue-router.
+---
+
+> Nuxt.js позволяет создавать вложенные маршруты при помощи дочерних путей vue-router.
+
+## Структура директорий
+
+Чтобы определить вложенный маршрут, вы должны создать файл Vue **с таким же имеменем, как имя каталога**, которые содержат ваши дочерние представления.
+> Не забывайте писать `Мой блог
+Hello {{ name }}!
+ + + + + +``` + +## Использование пре-процессоров + +Благодаря [vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html) вы можете использовать любой тип пре-процессоров для ``, ` + + +``` + +Чтобы использовать пре-процессоры, нужно просто установить их загрузчики для webpack: +```bash +npm install --save-dev pug@2.0.0-beta6 pug-loader coffee-script coffee-loader node-sass sass-loader +``` + +## Использование JSX + +Чтобы использовать JSX в компонентах, установите плагин Babel для JSX: +```bash +npm install --save-dev babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props +``` + +Затем добавьте название плагина [transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) в `nuxt.config.js`: +```js +module.exports = { + build: { + babel: { + plugins: ['transform-vue-jsx'] + } + } +} +``` + +Чтобы узнать больше об опции babel, прочитайте [конфигурацию build](/api/configuration-build). + +Теперь вы можете использовать JSX в методе `render` у компонентов. + +```html + +``` + +Узнайте больше в [разделе JSX](https://vuejs.org/v2/guide/render-function.html#JSX) документации к Vue.js. diff --git a/ru/guide/plugins.md b/ru/guide/plugins.md new file mode 100644 index 000000000..2978c41ca --- /dev/null +++ b/ru/guide/plugins.md @@ -0,0 +1,98 @@ +--- +title: Плагины +description: Nuxt.js позволяет подключать JS-плагины, которые будут запущены перед созданием экземпляра корневого приложения Vue.js. Это могут быть ваши собственные библиотеки или другие внешние модули. +--- + +> Nuxt.js позволяет подключать JS-плагины, которые будут запущены перед созданием экземпляра корневого приложения Vue.js. Это могут быть ваши собственные библиотеки или другие внешние модули. + +Важно помнить, что в [жизненном цикле любого экземпляра Vue](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) только хуки `beforeCreate` и `created` вызываются **как на стороне клиента, так и стороне сервера**. Все другие хуки выхываются только на клиенской стороне.
+
+## Использование внешних модулей
+
+Вероятно, вы захотите использовать внешние модули в приложении. Хороший пример для создания HTTP-запросов как для клиентской стороны, так и для серверной — [axios](https://github.com/mzabriskie/axios).
+
+Установим модуль `axios` через NPM:
+
+```bash
+npm install --save axios
+```
+
+Далее мы можем использовать его в приложении:
+
+```html
+
+ {{ title }}
+ + + +``` + +Однако существует **единственная проблема**: если подключить модуль на другой странице, он будет повторно добавлен в финальный код приложения. Мы же хотим подключить `axios` лишь единожды, поэтому будем использовать свойство `build.vendor` в файле `nuxt.config.js`: + +```js +module.exports = { + build: { + vendor: ['axios'] + } +} +``` + +После чего мы может испортировать `axios` в любом месте без проблем, размер финального кода приложения не увеличится. + +## Использование плагинов Vue + +Если мы хотим использовать [vue-notifications](https://github.com/se-panfilov/vue-notifications) для отображения уведомлений, нам нужно установить плагин до запуска приложения. + +Файл `plugins/vue-notifications.js`: +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +Vue.use(VueNotifications) +``` + +Затем в `nuxt.config.js` мы добавляем ссылку на файл плагина в свойстве `plugins`: +```js +module.exports = { + plugins: ['~plugins/vue-notifications'] +} +``` + +Чтобы узнать больше о свойстве `plugins` в конфигурации проекта, взгляните на [API плагинов](/api/configuration-plugins). + +Вообще, `vue-notifications` будет добавлен к финальному коду вашего приложения, но поскольку это библиотека, мы бы предпочли добавить код плагина в отдельный файл, содержащий код и возможных других внешних библиотек. + +Для этого добавим значение `vue-notifications` в файл `nuxt.config.js` в свойство `buid.vendor`: +```js +module.exports = { + build: { + vendor: ['vue-notifications'] + }, + plugins: ['~plugins/vue-notifications'] +} +``` + +## Только для браузеров + +Некоторые плагины могут работать **только в браузерах**. Вы можете использовать переменную `process.BROWSER_BUILD`, чтобы проверить, что плагин будет работать на стороне клиента. + +Пример: +```js +import Vue from 'vue' +import VueNotifications from 'vue-notifications' + +if (process.BROWSER_BUILD) { + Vue.use(VueNotifications) +} +``` + +Если вам нужны некоторые библиотеки только для серверной стороны, вы можете использовать переменную `process.SERVER_BUILD` во время того, как webpack создаёт файл `server.bundle.js`. diff --git a/ru/guide/routes-middleware.md b/ru/guide/routes-middleware.md new file mode 100644 index 000000000..59b86ffdf --- /dev/null +++ b/ru/guide/routes-middleware.md @@ -0,0 +1,6 @@ +--- +title: Middleware для маршрутизации +description: Документация скоро будет. +--- + +> Фича и документация для неё — скоро будет ;) diff --git a/ru/guide/routes-transitions.md b/ru/guide/routes-transitions.md new file mode 100644 index 000000000..6fa6798b6 --- /dev/null +++ b/ru/guide/routes-transitions.md @@ -0,0 +1,149 @@ +--- +title: Переходы между маршрутами +description: Nuxt.js использует компонент transition, который позволяет создавать поразительную анимацию при переходах между маршрутами. +youtube: https://www.youtube.com/embed/RIXOzJWFfc8 +--- + +> Nuxt.js использует компонент [<transition>](http://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components), который позволяет создавать поразительную анимацию при переходах между маршрутами + +## Использование + +**По-умолчанию, название анимации для перехода в Nuxt.js — `"page"`.** + +Чтобы добавить анимацию для перехода между любыми страницами приложения, необходим CSS-файл, который является общим для всех маршрутов. Создадим такой файл в папке `assets`: + +Общий CSS-код в `assets/main.css`: +```css +.page-enter-active, .page-leave-active { + transition: opacity .5s; +} +.page-enter, .page-leave-active { + opacity: 0; +} +``` + +Добавить путь к файлу в `nuxt.config.js`: +```js +module.exports = { + css: [ + 'assets/main.css' + ] +} +``` + +И вуаля! Все маршруты меняют друг друга с красивым эффектом затухания. + +## Свойство `transition` + +Вы можете изменить стандартные настройки перезодов, добавив свойство `transition` в файл `nuxt.config.js`: + +```js +module.exports = { + transition: 'test' + // or + transition: { + name: 'test', + mode: 'out-in' + } +} +``` + +Nuxt.js будет использовать эти настройки для создания компонента перехода: +```html +
+ На главную
+
+
+
+
+```
+
+Затем добавтье CSS-стили для указанной анимации перехода в файл `assets/main.css`:
+```css
+.bounce-enter-active {
+ animation: bounce-in .8s;
+}
+.bounce-leave-active {
+ animation: bounce-out .5s;
+}
+@keyframes bounce-in {
+ 0% { transform: scale(0) }
+ 50% { transform: scale(1.5) }
+ 100% { transform: scale(1) }
+}
+@keyframes bounce-out {
+ 0% { transform: scale(1) }
+ 50% { transform: scale(1.5) }
+ 100% { transform: scale(0) }
+}
+```
+
+*Заметка: вы также можете указать свойство `transition` в виде объекта в компоненте страницы, точно так же, как в файле конфигурации приложение.*
+
+## Динамическия переходы
+
+Для создания динамического перехода между маршрутами, который зависит от параметров маршрута, установите свойство `transition` в значение `function`.
+
+Пример динамического перехода для страницы `pages/posts.vue`:
+```html
+
+```
+
+В итоге, следующие эффекты перехода будут применяться, в зависимости от маршрута:
+- `/` к `/posts` => `slide-left`
+- `/posts` к `/posts?page=3` => `slide-left`
+- `/posts?page=3` к `/posts?page=2` => `slide-right`
diff --git a/ru/guide/static.md b/ru/guide/static.md
new file mode 100644
index 000000000..6284412c4
--- /dev/null
+++ b/ru/guide/static.md
@@ -0,0 +1,22 @@
+---
+title: Статические файлы
+description: У Nuxt.js есть специальный каталог для статическмх файлов под названием static.
+---
+
+> У Nuxt.js есть специальный каталог для статическмх файлов под названием `static`.
+
+Если вы не хотите использовать [Webpacked Assets](/guide/assets) из папки `assets`, то можно создать и использовать папку 'static' в корневом каталоге проекта.
+
+Nuxt.js автоматически сделает доступными эти файлы через `/`.
+
+Эта опция полезна для таких файлов, как 'robots.txt' или 'sitemap.xml'.
+
+В коде проекта эти файлы будут доступны также через `/`:
+
+```html
+
+О компании
+
+
+
+
+```
diff --git a/ru/guide/unit-testing.md b/ru/guide/unit-testing.md
new file mode 100644
index 000000000..8a825c3d4
--- /dev/null
+++ b/ru/guide/unit-testing.md
@@ -0,0 +1,107 @@
+---
+title: Модульное тестирование (Unit Testing)
+description: Тестирование вашего приложения — неотъемлемая часть веб-разработки. Nuxt.js поможет вам сделать этот процесс как можно проще.
+---
+
+> Тестирование вашего приложения — неотъемлемая часть веб-разработки. Nuxt.js поможет вам сделать этот процесс как можно проще.
+
+## Тестирование вашего приложения
+
+[Ava](https://github.com/avajs/ava) — мощный JavaScript-фреймворк для тестирования, совмещённый с [jsdom](https://github.com/tmpvar/jsdom). Мы можем запросто использовать их для end-to-end тестирования.
+
+Сперва нам нужно добавить ava и jsdom в виде зависимостей:
+```bash
+npm install --save-dev ava jsdom
+```
+
+И добавить команду в `package.json`:
+
+```javascript
+"scripts": {
+ "test": "ava",
+}
+```
+
+Мы собираемся писать наши тесты в папке `test`:
+```bash
+mkdir test
+```
+
+Предположим, у нас есть страница `pages/index.vue`:
+```html
+
+ Hello {{ name }}!
+ + + + + +``` + +Когда мы запускаем наше приложение с `npm run dev` и открываем [http://localhost:3000](http://localhost:3000), то мы видим красный заголовок `Hello world!`. + +Добавим наш файл с тестом `test/index.test.js`: + +```js +import test from 'ava' +import Nuxt from 'nuxt' +import { resolve } from 'path' + +// Сохраним экземпляры nuxt и server. +// Мы сможем сбросить их в конце теста. +let nuxt = null +let server = null + +// Инициализируем Nuxt.js и создадим сервер по адресу localhost:4000 +test.before('Init Nuxt.js', async t => { + const rootDir = resolve(__dirname, '..') + let config = {} + try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {} + config.rootDir = rootDir // папка проекта + config.dev = false // финальная сборка + nuxt = new Nuxt(config) + await nuxt.build() + server = new nuxt.Server(nuxt) + server.listen(4000, 'localhost') +}) + +// Пример генерации html-кода только для этого теста +test('Route / exits and render HTML', async t => { + let context = {} + const { html } = await nuxt.renderRoute('/', context) + t.true(html.includes('Hello world!
')) +}) + +// Пример тестирования с помощью проверки DOM +test('Route / exits and render HTML with CSS applied', async t => { + const window = await nuxt.renderAndGetWindow('http://localhost:4000/') + const element = window.document.querySelector('.red') + t.not(element, null) + t.is(element.textContent, 'Hello world!') + t.is(element.className, 'red') + t.is(window.getComputedStyle(element).color, 'red') +}) + +// Остановить сервер и попросить nuxt не отслеживать изменения файлов +test.after('Closing server and nuxt.js', t => { + server.close() + nuxt.close() +}) +``` + +Теперь мы можем запустить наши тесты: +```bash +npm test +``` + +Вообще, у jsdom имеются некоторые ограничения, поэтому что он не использует какой-либо браузер. Но этого достаточно для большинства тестов. Если вы хотите использовать браузер для тестирования вашего приложения, то посмотрите в сторону [Nightwatch.js](http://nightwatchjs.org). diff --git a/ru/guide/vuex-store.md b/ru/guide/vuex-store.md new file mode 100644 index 000000000..071b97aed --- /dev/null +++ b/ru/guide/vuex-store.md @@ -0,0 +1,193 @@ +--- +title: Хранилище Vuex +description: Использование единого хранилища для управления состоянием приложения важно для любого крупного проекта, поэтому nuxt.js в своём ядре использует Vuex. +--- + +> Использование единого хранилища для управления состоянием приложения важно для любого крупного проекта, поэтому nuxt.js в своём ядре использует Vuex. + +## Активация хранилища + +Если Nuxt.js обнаруживает каталог `store`, происходит следующее: + +1. Импортируется Vuex +2. Модуль `vuex` добавляется в сборку vendors +3. Опция `store` добавляется к корневому экземпляру `Vue`. + +Nuxt.js позволяет выбрать один из двух подходов при работе с хранилищем: +- **Обыкновенный:** `store/index.js` возвращает экземпляр хранилища +- **Модульный:** каждый `.js`-файл в папке `store` считается [модулем с пространством имён](http://vuex.vuejs.org/en/modules.html) (`index` считается корневым модулем) + +Для использования хранилища в обычном режиме, мы создаём файл `store/index.js` и экспортируем экземпляр хранилища: + +```js +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +const store = new Vuex.Store({ + state: { + counter: 0 + }, + mutations: { + increment (state) { + state.counter++ + } + } +}) + +export default store +``` + +> Нет необходимости отдельно устанавливать `vuex` — он идёт в комплекте с nuxt.js + +Теперь в наших компонентах можно использовать `this.$store`: + +```html + + + +``` + +## Файлы модулей + +> Nuxt.js позволяет использовать каждый файл в директории `store` как отдельный модуль хранилища. + +Если вы хотите использовать этот подход, экспортируйте в `store/index.js` состояние, мутации и действия, а не экземпляр хранилища: + +```js +export const state = { + counter: 0 +} + +export const mutations = { + increment (state) { + state.counter++ + } +} +``` + +Предположим, у нас есть модуль `store/todos.js`: +```js +export const state = { + list: [] +} + +export const mutations = { + add (state, text) { + state.list.push({ + text: text, + done: false + }) + }, + toggle (state, todo) { + todo.done = !todo.done + } +} +``` + +И в `pages/todos.vue` мы используем модуль `todos`: + +```html + +-
+
- + + {{ todo.text }} + + +
Модули, экспортирующие экземпляр хранилища, использовать тоже можно — но подключать их придётся вручную.
+
+## Метод fetch
+
+> Метод `fetch` используется для заполнения хранилища перед рендерингом страницы. Он похож на метод `data`, но не устанавливает данные компонента.
+
+Метод `fetch`, *если он указан*, вызывается каждый раз перед загрузкой компонента (**вышесказанное справедливо только для компонентов-страниц**). Он может быть вызван как при рендеренге на сервере, так и при переходе по ссылке на клиенте.
+
+Метод `fetch` получает в качестве первого аргумента [контекст](/api/pages-context). Чтобы сделать метод асинхронным, **верните промис** — nuxt.js дождётся его разрешения перед тем как рендерить компонент.
+
+Пример `pages/index.vue`:
+```html
+
+