Benjamin-Coleman / vuejs-webpack-boilerplate

:eyes: vue.js boilerplate using webpack, gsap and scss. Written in es2015

[ OUTDATED ] VueJs Boilerplate - Babel / Vuex / Webpack / SCSS

Warning

This boilerplate is no longer updated.

TECHNOLOGIES

• VueJs
• Vuex
• EventEmitter
• GSAP - TweenMax
• Babel | ES2015
• Webpack
• ESLint
• SCSS

Install dependancies :

  npm i

Launch the project :

  npm start

The project will be launched at http://localhost:3000/

Build for production :

  npm run build

EventManagerMixin

EventManagerMixin handle Emitter events and DOM events easily. It will auto bind the context, and dettach events when the component will unmount.

If you want to use the EventManager mixin, you need to define emitterEvents / domEvents in your vue component like so :

export default Vue.extend({

  mixins: [EventManagerMixin],

  emitterEvents: [{
    message: WINDOW_RESIZE, // Event Message
    method: 'onWindowResize' // Name of the method
    once: false, // Optional - Listen to the event once or not, default: false
  }],

  domEvents: [{
    target: document, // DOM element to attach the event
    event: 'mousemove', // Event type
    method: 'handleDocumentMouseMove' // Name of the method
  }],

...
}

CONTRIBUTORS

• Patrick Heng
• Fabien Motte
• Nox

Hope you like it <3