Введение.

Этот проект представляет примеры работы Vuex (паттерн управления состоянием и библиотека) для приложений на Vue.js.

Этот проект на GitHub можно посмотреть здесь

Демонстрацию этого проекта можно посмотреть здесь

Обзор

Vue.js фреймворк

Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.

Если вы — опытный фронтенд-разработчик, и хотите узнать, чем Vue отличается от остальных библиотек или фреймворков, обратите внимание на сравнение с другими фреймворками.

Vuex (паттерн управления состоянием)

Vuex - это паттерн управления состоянием и библиотека для приложений на Vue.js. Он служит центральным хранилищем данных для всех компонентов приложения и обеспечивает предсказуемость изменения данных при помощи определённых правил. Кроме того, Vuex интегрируется с официальным расширением инструментов разработчика Vue, предоставляя "из коробки" такие продвинутые возможности как "машину времени" при отладке и экспорт/импорт слепков состояния данных.

Ресурсы

Vue.js (JavaScript framework): Документация; API; Сравнение с другими фреймворками; Примеры; Components & Libraries
Vuex (паттерн управления состоянием): Документация; GitHub
Vue-Router: Документация; GitHub

Работа приложения

Используются реактивные возможности построения пользовательского интерфейса.
Используются HTML-шаблоны для создания представлений веб-приложений, которые состоят из различных частей.
Сборка модулей осуществляется по технологии Asynchronous module definition (AMD). Для обеспечения этой технологии используется библиотека RequireJS которая является загрузчиком JavaScript файлов и модулей.

Установка приложения

Предварительные требования

Apache2, Nginx веб сервер или похожие.

Развертывание

Клонировать или загрузить vue-resume проект с GitHub.
Сконфигурировать веб сервер так чтобы входная точка была /index.html.
Доступ к URL вашего проекта с помощью веб-браузера (пр. http://vuex-examples/index.html).

Структура приложения

Vuex-Examples проект имеет файловую структуру, показанную ниже см. пр.1.

пр.1



    |-- app/
    |  |-- components/      # Отдельные компоненты проекта
    |  |-- css/             # CSS - каскадные стили
    |  |-- img/             # Изображения
    |  `-- js/              # JavaScript файлы
    |
    |-- .firebaserc         # FireBase конфигурация
    |-- .gitattributes
    |-- .gitignore
    |-- firebase.json       # FireBase конфигурация
    |-- index.html          # Входная точка приложения (html)
    |-- LICENSE.md
    |-- main.js             # Входная точка приложения (JavaScript)
    `-- README.md

Точка входа main.js

Точкой входа в приложение является файл main.js. В нем происходит конфигурация requirejs, компоновка приложения из отдельных компонентов, создание самого приложения App см. пр.2.

пр.2


    requirejs.config({
        baseUrl: '',
        paths: {
            css: "app/js/requirejs/css.min", //requirejs plugin for load css
            text: "app/js/requirejs/text", //requirejs plugin for load text
            es6_promise: 'app/js/es6-promise/es6-promise.min',
            vue: 'https://unpkg.com/vue/dist/vue', // 'app/js/vue',
            vuex: 'https://unpkg.com/vuex/dist/vuex', // 'app/js/vuex',
            vue_router: 'https://unpkg.com/vue-router/dist/vue-router', // 'app/js/vue-router',
        },
        shim: {
        }
    });

    require([
        'vue',
        // Vue-Router
        'vue_router',
        // Components
        'app/components/app/app',
        'app/components/app-home/home',
        'app/components/app-examples/examples',
        'app/components/app-contact/contact',
        'app/components/test-counter/counter',
        'app/components/test-counter-hot/counter',
        'app/components/test-shopping-cart/components/app/app',
        'app/components/test-todomvc/components/app/app',
        'app/components/test-chat/components/app/app'
    ],
        function ( Vue, VueRouter, App, Home, Examples, Contact, Counter, CounterHot, ShoppingCart, TodoMvc, Chat) {

            // Use plugin - VueRouter
            Vue.use(VueRouter);
            // Create the router instance and pass the `routes` option
            var routes = [
                {
                    path: '/',
                    meta: { home: true },
                    component: Home
                },
                {
                    path: '/home',
                    meta: { home: true },
                    component: Home
                },
                {
                    path: '/examples',
                    meta: { examples: true },
                    component: Examples
                },
                {
                    path: '/contact',
                    meta: { contact: true },
                    component: Contact
                },
                {
                    path: '/counter',
                    meta: { examples: true },
                    component: Counter
                },
                {
                    path: '/counter-hot',
                    meta: { examples: true },
                    component: CounterHot
                },
                {
                    path: '/shopping-cart',
                    meta: { examples: true },
                    component: ShoppingCart
                },
                {
                    path: '/todomvc',
                    meta: { examples: true },
                    component: TodoMvc
                },
                {
                    path: '/chat',
                    meta: { examples: true },
                    component: Chat
                },
            ];

            // Create the router instance and pass the `routes` option
            var router = new VueRouter({
                routes: routes
            });

            // Create and mount the root instance.
            var app = new App({
                router: router
            }).$mount('#main');
        }
    );