Nuxt.js: минималистичный каркас для создания универсальных приложений Vue.js

Отображение сообщений блога на главной странице

Наша текущая домашняя страница довольно проста, так что мы можем сделать ее лучше, показывая последние сообщения из блога. Мы сделаем это, создав компонент <posts> и отобразив его на странице index.vue .

Но сначала мы должны получить сохраненные записи в блоге JSON и поместить их в файл в корневой папке приложения. Файл можно скачать отсюда , или вы можете просто скопировать JSON ниже и сохранить в корневой папке как posts.json :

 [ { "id": 4, "title": "Building universal JS apps with Nuxt.js", "summary": "Get introduced to Nuxt.js, and build great SSR Apps with Vue.js.", "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>", "author": "Jane Doe", "published": "08:00 - 07/06/2017" }, { "id": 3, "title": "Great SSR Use cases", "summary": "See simple and rich server-rendered JavaScript apps.", "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>", "author": "Jane Doe", "published": "17:00 - 06/06/2017" }, { "id": 2, "title": "SSR in Vue.js", "summary": "Learn about SSR in Vue.js, and where Nuxt.js can make it all faster.", "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>", "author": "Jane Doe", "published": "13:00 - 06/06/2017" }, { "id": 1, "title": "Introduction to SSR", "summary": "Learn about SSR in JavaScript and how it can be super cool.", "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>", "author": "John Doe", "published": "11:00 - 06/06/2017" } ] 

Примечание: в идеале сообщения должны быть получены из API или ресурса. Например, Contentful — это сервис, который можно использовать для этого.

Компоненты живут в каталоге components . Там мы создадим отдельный файл <posts> :

 <!-- ./components/Posts.vue --> <template> <section class="main-content"> <div class="container"> <h1 class="title has-text-centered"> Recent Posts. </h1> <div class="columns is-multiline"> <div class="column is-half" v-for="post in posts" :key="post.id"> <div class="card"> <header class="card-header"> <p class="card-header-title"> {{ post.title }} </p> </header> <div class="card-content"> <div class="content"> {{ post.summary }} <br> <small> by <strong>{{ post.author}}</strong> \\ {{ post.published }} </small> </div> </div> <footer class="card-footer"> <nuxt-link :to="`/post/${post.id}`" class="card-footer-item"> Read More </nuxt-link> </footer> </div> </div> </div> </div> </section> </template> <script> import posts from '~/posts.json' export default { name: 'posts', data () { return { posts } } } </script> 

Мы импортируем данные записей из сохраненного файла JSON и присваиваем их значению posts в нашем компоненте. Затем мы перебираем все записи в шаблоне компонента с помощью директивы v-for и отображаем нужные нам атрибуты записи.

Примечание. Символ ~ является псевдонимом для каталога / . Вы можете просмотреть документы здесь, чтобы увидеть различные псевдонимы, которые предоставляет Nuxt.js, и с какими каталогами они связаны.

Далее мы добавляем компонент <posts> на домашнюю страницу:

 <!-- ./pages/index.vue --> <template> <div> <!-- ... --> <posts /> </div> </template> <script> import Posts from '~/components/Posts.vue' export default { components: { Posts }, // ... } </script> 

Добавление динамических маршрутов

Теперь мы добавим динамические маршруты для сообщений, чтобы мы могли получить доступ к сообщению, например, с помощью этого URL: /post/1 .

Для этого мы добавляем каталог post каталог pages и структурируем его так:

 pages └── post └── _id └── index.vue 

Это генерирует соответствующие динамические маршруты для приложения, как это:

 router: { routes: [ // ... { name: 'post-id', path: '/post/:id', component: 'pages/post/_id/index.vue' } ] } 

Обновление файла одного сообщения:

 <!-- ./pages/post/_id/index.vue --> <template> <div class="main-content"> <div class="container"> <h2 class="title is-2">{{ post.title }}</h2> <div v-html="post.content"></div> <br> <h4 class="title is-5 is-marginless">by <strong>{{ post.author }}</strong> at <strong>{{ post.published }}</strong></h4> </div> </div> </template> <script> // import posts saved JSON data import posts from '~/posts.json' export default { validate ({ params }) { return /^\d+$/.test(params.id) }, asyncData ({ params }, callback) { let post = posts.find(post => post.id === parseInt(params.id)) if (post) { callback(null, { post }) } else { callback({ statusCode: 404, message: 'Post not found' }) } }, head () { return { title: this.post.title, meta: [ { hid: 'description', name: 'description', content: this.post.summary } ] } } } </script> 

Nuxt.js добавляет некоторые пользовательские методы для компонентов нашей страницы, чтобы упростить процесс разработки. Посмотрите, как мы используем некоторые из них на одной странице поста:

• Проверьте параметр маршрута с помощью метода validate . Наш метод validate проверяет, является ли переданный параметр маршрута числом. Если он возвращает false , Nuxt.js автоматически загрузит страницу ошибки 404. Вы можете прочитать больше об этом здесь .
• Метод asyncData используется для извлечения данных и их рендеринга на стороне сервера перед отправкой ответа в браузер. Он может возвращать данные разными способами. В нашем случае мы используем функцию обратного вызова для возврата сообщения, имеющего тот же атрибут id параметр id маршрута. Вы можете увидеть различные способы использования этой функции здесь .
• Как мы уже видели, мы используем метод head для установки заголовков страницы. В этом случае мы меняем заголовок страницы на заголовок поста и добавляем сводку поста в качестве мета-описания страницы.

Отлично, теперь мы можем снова посетить наш блог, чтобы увидеть, как все маршруты и страницы работают должным образом, а также просмотреть исходный код страницы, чтобы увидеть генерируемый HTML. У нас есть функциональное серверное JavaScript-приложение.

 // ./nuxt.config.js module.exports = { // ... generate: { routes(callback) { const posts = require('./posts.json') let routes = posts.map(post => `/post/${post.id}`) callback(null, routes) } } } 

 npm run generate 

 npm install -g firebase-tools 

 firebase login 

 firebase init