Пример vue mobx nuxtjs

NUXT.JS – минимальная структура для создания приложений Vue.js с помощью сервера бокового рендеринга, кодовой расщепления, горячей перезагрузкой, статическим поколением и многое другое!

Это Nuxt.js Проект показывает интеграцию MobX как альтернатива для государственного управления в ваших приложениях Vuejs. Простое два приложения с вкладками, которое оказывает фильтрованный список продуктов, «носки» и «обувь». При нажатии они добавляются в корзину.

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

То, что я нашел удивительно, что nuxt было насколько легко начать, просто начните создавать компоненты в Страницы Каталог, не беспокоиться о маршрутизации, и это просто работает !!

Добавил mobx.

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

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

https://github.com/mobxjs/mobx

yarn add mobx-vue mobx

Добавил store.js Файл в новую папку, созданную под названием Услуги , нужно будет импортировать магазин в 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 Разработан точно в соответствии с спецификацией дизайна материала. Каждый компонент передается вручную, чтобы принести вам лучшие возможные пользовательские инструменты для вашего следующего отличного приложения. Разработка не останавливается в основных компонентах, изложенных в спецификации Google. Благодаря поддержке членов и спонсоров сообществ, дополнительные компоненты будут разработаны и доступны для всех, чтобы каждый наслаждался.

Настроен плагин для поддержки Vuetify в плагинах файла/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"
  }
})

Настройте мой по умолчанию. Вью в папке макетов

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 Документы Отказ

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