Nuxt - Vuetify Start
В приложении представлены возможности Vuetify.js (Material Component Framework).

2018-01-03

shop

Введение.

Я использовал примеры с официального сайта, чтобы продемонстрировать работу фреймворка Vuetify.

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

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

Обзор Vuetify.js фреймворка

Vuetify - это семантическая структура компонентов для Vue. Он направлен на предоставление многоразовых компонентов, которые делают создание вашего приложения легким.

Компоненты Vuetify, созданные в соответствии с Google's Material Design Spec., содержат легко запоминающийся семантический дизайн, который вместо запоминания разметки и сложных классов дает вам типы, которые говорят о свойствах, имеющих простые и понятные имена.

Используйте возможности сообщества Vuetify и получите помощь 24/7 от талантливых разработчиков по всему миру

Vuetify поддерживает все современные браузеры, включая IE11 и Safari 9+. От мобильного телефона до рабочего стола ноутбука. Вы можете быть уверены, что ваше приложение будет работать так, как ожидалось. Vuetify имеет 8 готовых шаблонов, которые помогут вам начать работу с Vuetify еще быстрее..

Возможности

  • Наличие 80 компонентов
  • 8 шаблонов для Vue-CLI
  • Наличие чата, где можно задать вопросы
  • Модульная система перехода компонентов
  • Обеспечивает высокое быстродействие
  • Постоянные обновления для добавления новых возможностей фреймворка
  • Постоянно расширяемое сообщество

Ресурсы

Vuetify.js (Material Component Framework)
Документация
GitHub
Google's Material Design Spec.
Документация
GitHub
Nuxt (JavaScript framework)
Документация
GitHub
Vue.js (JavaScript framework)
Документация
API
Сравнение с другими фреймворками

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

  • Используются реактивные возможности построения пользовательского интерфейса.
  • Используются HTML-шаблоны для создания представлений веб-приложений, которые состоят из различных частей.
  • Используется маршрутизатор Vue-Router для создания одностраничного приложения (SPA, Single-Page Applications).
  • Для работы с локальными данными используется библиотека Vuex это паттерн управления состоянием и библиотека для приложений на Vue.js.
  • Для построения пользовательского интерфейса используется Vuetify.js (Material Component Framework), это один из популярных HTML, CSS и JS фреймворков для разработки интерактивных мобильных проектов в Интернете.

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

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

  1. Убедитесь в том, что у вас установлен NodeJS и npm.

  2. Клонируйте или загрузите vuetify-nuxt-start проект с GitHub.

  3. Инсталируйте ваши зависимости

cd <project-name> npm install # Or yarn install

Переменные окружения

Файл env.js должен находиться в корне проекта, если он отсутствует, то его нужно создать на основе примера файла env.example.js, иначе приложение будет выдавать ошибку. Файл env.js устанавливает переменные окружения.

Запуск вашего проекта

Development

npm run dev

Приложение будет запущено в режиме Разработки и будет выполнятся на http://localhost:3000

Production


npm run build
npm start

Приложение будет запущено в Рабочем режиме и будет выполнятся на http://localhost:3000

Генерация статического проекта

npm run generate

При построении вашего приложения будет генерироваться HTML файл для каждого вашего роутера и сохраняться по соответствующему пути.

Пример:


-| pages/
----| about.vue
----| index.vue

Будет сгенерировано:


-| dist/
----| about/
------| index.html
----| index.html

Таким образом вы сможете размещать ваш статический проект на любом статическом хостинге.

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

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

пр.1


    |-- .nuxt/              # Папка создается при выполнении команды * npm run dev/build *
    |                       # содержит результирующие файлы при построении приложения
    |-- assets/             # Папка содержит нескомпилированные файлы с
    |                       # исходным кодом, такие как LESS, SASS или JavaScript
    |-- config/             # Базовые параметры конфигурации
    |-- docs/               # Папка создается при выполнении команды * npm run generate *
    |                       # содержит статические файлы веб-приложения для размещения на статическом хостинге
    |-- layouts/            # Папка содержит шаблоны приложения
    |-- middleware          # Папка содержит промежуточное программное обеспечение приложения
    |-- node_modules/       # Папка содержит * npm * библиотеки
    |-- pages/              # Папка содержит представления (views) и маршруты (routes)
    |-- plugins/            # Папка содержит JavaScript-плагины, запускаемые перед созданием экземпляра корневого приложения Vue.js
    |                       # а также другие JavaScript-библиотеки
    |-- static/             # Папка содержит статические файлы. Каждый файл в этой папке доступен через /
    |-- store/              # Папка содержит файлы Vuex хранилища
    |-- .gitignore
    |-- env.example.js      # Пример файла окружения
    |-- env.js              # Файл окружения
    |-- LICENSE.md
    |-- nuxt.config.js      # Файл  содержит пользовательскую конфигурацию Nuxt.js
    |-- package.json        # Файл содержит список зависимостей и команды для вашего приложения
    `-- README.md

Конфигурация

env.js

Файл env.js должен находиться в корне проекта, если он отсутствует, то его нужно создать на основе примера файла env.example.js, иначе приложение будет выдавать ошибку. В файле env.js устанавливаются пользовательские значения параметров вашей конфигурации, которые переустанавливают базовые параметры конфигурации.

Базовые параметры вашей конфигурации располагаются в папке config/env/. В этой папке расположены следующие файлы конфигурации:

  • global.js
  • production.js
  • development.js
  • testing.js

В этих файлах устанавливаются базовые параметры конфигурации в зависимости от режима работы приложения: development, production, testing.

Конфигурация файла env.js см. пр.2.

пр.2

    export default {
        app_env: 'testing', // development, production, testing
        global: {
            debug: false,
            maintenance: false,
            ui: {
                color_theme: 'light', // dark/light
                nav_left: {show: true, value: true},
                nav_left_mini: {show: true, value: false},
                nav_left_clipped: {show: true, value: false},
                footer_fixed: {show: true, value: false},
                nav_right: {show: false, value: false}
            },
            personal_data: {
                app_title: 'Vuetify',
                logo_title: 'BSA Lab.',
                logo_icon: 'check_circle',
                logo_img: '/img/system/user.jpg',
                copyright: '© 2017 "BSA Lab." - All Rights Reserved',
                designed_with: 'BSA Lab Studio',
                designed_with_url: 'https://www.real.com/iamgurdeeposahan',
                contact: {
                    location: '795 Real Ave, Suite 600',
                    phone: '+01 234 567 890',
                    fax: '+01 234 567 890',
                    email: 'real@real.com',
                    website: 'www.real.com'
                },
                twitter: {url: 'https://twitter.com/real', tag: '@Real'},
                socials: {
                    facebook: {url: 'https://facebook.com/real', icon: 'fa-facebook'},
                    twitter: {url: 'https://twitter.com/real', icon: 'fa-twitter'},
                    google: {url: 'https://google.com/real', icon: 'fa-google-plus'},
                    linkdin: {url: 'https://linkdin.com/real', icon: 'fa-linkedin'},
                    flickr: {url: 'https://flickr.com/real', icon: 'fa-flickr'},
                    skype: {url: 'https://skype.com/real', icon: 'fa-skype'}
                }
            }
        },
        production: {
            api: {
                base_url: 'http://real-production.com/api'
            }
        },
        development: {
            api: {
                base_url: 'http://real-development.com/api'
            }
        },
        testing: {
            api: {
                base_url: 'http://real-testing.com/api'
            }
        }
    }

nuxt.config.js

Файл nuxt.config.js содержит пользовательскую конфигурацию Nuxt.js см. пр.3.

пр.3

    const webpack = require('webpack')
    module.exports = {
        /*
         ** Middleware
         */
        router: {
            base: '/vuetify-nuxt-start/',
            middleware: 'ini-app'
        },
        generate: {
            dir: 'docs'
        },
        /*
         ** Headers of the page
         */
        head: {
            title: 'Nuxt + Vuetify project',
            meta: [
                {charset: 'utf-8'},
                {"http-equiv": 'X-UA-Compatible', content: 'IE=edge'},
                {name: 'viewport', content: 'width=device-width, initial-scale=1'},
                {hid: 'description', name: 'description', content: 'Nuxt.js project'}
            ],
            link: [
                {rel: 'icon', type: 'image/x-icon', href: '/img/favicon.ico'},
                // {rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'}
            ]
        },
        /*
         ** Customize the progress-bar color
         */
        loading: {color: '#3B8070'},
        /*
         ** Build configuration
         */
        build: {
            vendor: [
                'babel-polyfill',
                'vuetify',
                'vee-validate',
                'lodash',
                'axios',
                'qs', // Parser JSON/QUERY
                'cheerio',// Parser HTML/XML
                'express-useragent',// Get useragent info
                '~plugins/lib/http.class', // http class
                // '~plugins/lib/utility-box'
            ],
            plugins: [
                new webpack.ProvidePlugin({
                    '_': 'lodash',
                })
            ]
        },
        plugins: [
            '~plugins/vuetify.js',
            // '~plugins/vee-validate.js',
        ],
        css: [
            {src: '~assets/style/vuetify.styl', lang: 'styl'},
            {src: '~assets/style/app.styl', lang: 'styl'}
        ]
    }