Nuxt - Business Light
Рекламный сайт фирмы, сделанный на базе Nuxt фреймворка.

2017-12-28

shop

Введение.

Я использовал свободный шаблон Osahan – Free Responsive Business Bootstrap Template, чтобы продемонстрировать работу фреймворка Nuxt.

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

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

Обзор Nuxt фреймворка

Nuxt.js — это фреймворк для универсальных приложений на Vue.js.

Основной задачей этого фреймворка является рендеринг пользовательского интерфейса в условиях абстракции от клиент-серверной архитектуры.

Цель разработки — создать фреймворк настолько гибкий, чтобы его можно было использовать и как основу, и как дополнение к уже существующим проектам на Node.js.

Nuxt.js содержит широкие возможности конфигурации приложения, что позволяет сделать разработку лёгкой и приятной.

Кроме того, предоставляется опция разработки: nuxt generate. С помощью неё можно статически генерировать приложения на Vue.js. На наш взгляд, эта опция может оказаться следующим большим шагом на пути разработки микросервисных веб-приложений.

Фреймворк Nuxt.js привносит множество возможностей в разработке веб-приложений, таких как: асинхронные данные, middleware, шаблоны и др.

Возможности

  • Написание Vue-файлов
  • Автоматическое разделение кода
  • Серверный рендеринг
  • Мощная система маршрутизации с асинхронными данными
  • Обслуживание статических файлов
  • Транспиляция ES6/ES7
  • Сборка и минимизация JS & CSS
  • Управление элементами в блоке head
  • Горячая замена модулей при разработке
  • Интеграция c ESLint
  • Пре-процессоры: SASS, LESS, Stylus, и др.

Ресурсы

Nuxt (JavaScript framework)
Документация
GitHub
Vue.js (JavaScript framework)
Документация
API
Сравнение с другими фреймворками
Примеры
Components & Libraries
jQuery
Документация
Bootstrap 3
Документация
jQuery plugin Bootstrap Validation
Документация
GitHub
jQuery plugin Owl Carousel 2
Документация
GitHub
Font Awesome - the iconic font and CSS toolkit
Документация
Animate.css - library of CSS animations
GitHub
Примеры

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

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

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

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

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

  2. Клонируйте или загрузите vue-nuxt-static проект с 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 - Business Light проект имеет файловую структуру, показанную ниже см. пр.1.

пр.1


    |-- .nuxt/              # Папка создается при выполнении команды * npm run dev/build *
    |                       # содержит результирующие файлы при построении приложения
    |-- assets/             # Папка содержит нескомпилированные файлы с
    |                       # исходным кодом, такие как LESS, SASS или JavaScript
    |-- config/             # Базовые параметры конфигурации
    |-- dist/               # Папка создается при выполнении команды * npm run generate *
    |                       # содержит статические файлы веб-приложения для размещения на статическом хостинге
    |-- layouts/            # Папка содержит шаблоны приложения
    |-- middleware          # Папка содержит промежуточное программное обеспечение приложения
    |-- node_modules/       # Папка содержит * npm * библиотеки
    |-- pages/              # Папка содержит представления (views) и маршруты (routes)
    |-- 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 устанавливаются пользовательские значения параметров вашей конфигурации, которые переустанавливают базовые параметры конфигурации.

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

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

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

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

пр.2

    export default {
        env: 'testing',// development, production, testing
        debug: true,
        personal_data: {
            copyright: '© 2016 OSAHAN - All Rights Reserved',
            designed_with: 'Osahan Studio',
            designed_with_url: 'https://www.facebook.com/iamgurdeeposahan',
            contact: {
                location: '795 Folsom Ave, Suite 600',
                phone: '+01 234 567 890',
                fax: '+01 234 567 890',
                email: 'company@company.com',
                website: 'www.yourdomain.com'
            },
            twitter: { url: '#', tag: '@Osahan' },
            socials: {
                facebook: { url: '#', icon: 'fa-facebook' },
                twitter: { url: '#', icon: 'fa-twitter' },
                google: { url: '#', icon: 'fa-google-plus' },
                linkdin: { url: '#', icon: 'fa-linkedin' },
                flickr: { url: '#', icon: 'fa-flickr' },
                skype: { url: '#', icon: 'fa-skype' }
            },
            blog: {
                url: '/blog/home1',
                total: 3 // Count of posts on page
            },
            portfolio: {
                url: '/portfolio/col-1',
                total: 6, // Count of items on page
            }
        }
    }

nuxt.config.js

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

пр.3

    const webpack = require('webpack')

    module.exports = {
        /*
         ** Router config
         */
        router: {
            middleware: 'set-config'
        },
        /*
         ** Cache
         */
        cache: true,
        /*
         ** Environment
         */
        env: {
            //env: 'testing',
            baseUrl: process.env.BASE_URL || 'http://localhost:3000',
        },
        /*
         ** Headers of the page
         */
        head: {
            title: 'Vue Nuxt Static',
            meta: [
                {charset: 'utf-8'},
                {name: 'viewport', content: 'width=device-width, initial-scale=1'},
                {hid: 'description', content: "Vue Nuxt static project"}
            ],
            script: [
                {src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'},
                {src: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'},
            ],
            link: [
                {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
                {rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'},
                {rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'},
                {
                    rel: 'stylesheet',
                    href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'
                },
                {rel: 'stylesheet', href: '/css/animate.css'},
                {rel: 'stylesheet', href: '/css/style.css'},
            ]
        },
        build: {
            devtool: 'eval-source-map', // eval-source-map inline-source-map
            vendor: [
                'babel-polyfill',
                'lodash',
            ],
            plugins: [
                new webpack.ProvidePlugin({
                    '_': 'lodash',
                })
            ]
        },
        /*
         ** Global CSS
         */
        css: [],
        /*
         ** Customize the progress-bar color
         */
        loading: {color: '#3B8070'}
    };