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>
Настройка сборки
# 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