Nuxt .js - это минимальная структура для создания приложений Vue.js с рендерингом на стороне сервера, разделением кода, горячей перезагрузкой, статической генерацией и многим другим!

Этот проект Nuxt.js демонстрирует интеграцию Mobx в качестве альтернативы для управления состоянием в ваших vuejs-приложениях. Простое приложение с двумя вкладками, которое отображает отфильтрованный список товаров: носки и обувь. При нажатии они добавляются в корзину.

Доступ к корзине можно получить, нажав кнопку корзины, и в ней перечислены товары в корзине и общая стоимость. Предметы удаляются из корзины при нажатии на них.

Что меня поразило в Nuxt, так это то, насколько легко было начать работу, просто начните создавать компоненты в каталоге pages, не беспокоясь о маршрутизации, и он просто работает !!

Добавлен Mobx

MobX - это проверенная на практике, простая и масштабируемая библиотека управления состоянием, прозрачно применяющая функциональное реактивное программирование (TFRP). Принцип построения Mobx очень прост:

Все, что может быть получено из состояния приложения, должно быть производным. Автоматически.

Https://github.com/mobxjs/mobx

yarn add mobx-vue mobx

Добавлен файл store.js в новую созданную папку с именем services, необходимо будет импортировать магазин в файл index.vue

import Vue from 'vue'
import { Store } from '../services/store'
import { Observer, observer } from 'mobx-vue'
const store = new Store()
Vue.prototype.$store = store

Добавлена ​​поддержка декораторов.

Установите соответствующие плагины

yarn add -D  @babel/plugin-proposal-class-properties
yarn add -D babel-plugin-transform-decorators-legacy

Обновите файл nuxt.config.js

/*
  ** Build configuration
  */
  build: {
    babel: {
      plugins: [
        [
          '@babel/plugin-proposal-decorators',
          {
            legacy: true
          }
        ],
        [
          '@babel/plugin-proposal-class-properties',
          {
            loose: true
          }
        ]
      ]
    },

Использование Vuetify

Vuetify разработан в точном соответствии со спецификацией Material Design. Каждый компонент создается вручную, чтобы предоставить вам лучшие инструменты пользовательского интерфейса для вашего следующего замечательного приложения. Разработка не останавливается на основных компонентах, указанных в спецификации Google. При поддержке членов сообщества и спонсоров будут разработаны дополнительные компоненты, которые будут доступны для всех.

Настроил плагин для поддержки Vuetify в файле plugins/vuetify.js

// plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify, {
  theme: {
    primary: "#26A69A",
    secondary: "#26A69A",
    accent: "#00796B",
    error: "#f44336",
    warning: "#ffeb3b",
    info: "#2196f3",
    success: "#004D40"
  }
})

Установите мой default.vue в папку макетов

<template>
  <v-app>
    <nuxt />
  </v-app>
</template>

Https://vuetifyjs.com/en/

Настройка сборки

# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn run dev
# build for production and launch server
$ yarn run build
$ yarn start
# generate static project
$ yarn run generate

Подробное объяснение того, как все работает, можно найти в Nuxt.js docs.

Смотрите полный исходный код приложения здесь: https://github.com/aaronksaunders/mobx-nuxt-example