Giter Club home page Giter Club logo

webpack-template-base_vue_vuex's Introduction

Готовая сборка webpack c Vue и Vuex

В ней есть оптимизация и минимизация:

  1. Vue и Vuex
  2. JavaScript (babel, core-js)
  3. SCSS
  4. HTML
  5. Сжатие картинок
  6. Работа со шрифтами
  7. Проверка кода ESLint
  8. Поддержка сетки smart-grid (это миксины, которые облегчают адаптивную верстку проекта, как в bootstrap: xs,sm,md,lg,xl)
  9. Webpack-dev-server
  10. Поддержка jest с покрытием кода
  11. Возможность использования глобальных переменных ENV
  12. Описание ошибок выводится прямо в браузере
  13. Включен плагин, позволяющий удалять блоки кода, например при выводе в продакшен
  14. Поддержка postcss

webpack сборка без Vue находится тут https://github.com/abyss-soft/webpack-template-base

если нужна сборка без Vue и с шаблонизатором Pug, то она тут https://github.com/abyss-soft/webpack-template-base_Pug

если нужна простая сборка с gulp 4.0, то она тут https://github.com/abyss-soft/gulp4-html

если нужна простая сборка с gulp 3.9, то она тут https://github.com/abyss-soft/gulp-html


Установка

Клонируем к себе репозиторий

Сделайте git clone

Смените директорию cd webpack-template-base_vue_vuex

Запустите npm install


Работа

для включения Smart-grid

даем команду npm run smart-grid

в папке SCSS/UTILS появляется файл _smart-grid.scss

его нужно подключить туда, где хотите применять сетку


Для разработки:

даем команду npm run dev

Получаем комфортную среду для отладки, есть карты кода (source maps)


Использования глобальных переменных ENV

переменные экспортируются в файле webpack.dev.conf.js

Например:

APP_ENV: JSON.stringify(process.env.APP_ENV),
API_KEY: JSON.stringify(process.env.API_KEY)

Использовать в коде можно например так:

if (APP_ENV === "dev") {..код  для разработки..}

Или так, используя глобальную переменную process.env:

if (process.env.NODE_ENV !== `production`) {..код только для разработки, в продакшен не попадет..}

использование плагина удаления блоков кода

удаление блоков кода в HTML:

все что находится между блоками deletestart ... deleteend будет удалено


Для продакшена:

если использовали глобальные переменные, то устанавливаем переменную APP_ENV=prod

даем команду npm run prod

Получаем папку dist содержащую минимизированный / сжатый код


Для проверки правильности кода:

даем команду npm run lint


Для проверки тестов:

даем команду npm run test

webpack-template-base_vue_vuex's People

Contributors

abyss-soft avatar

Watchers

 avatar  avatar

Forkers

alexrsbng oleglr

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.