Skip to content

Latest commit

 

History

History
76 lines (48 loc) · 2.88 KB

README.md

File metadata and controls

76 lines (48 loc) · 2.88 KB
Raw

Vue Modern Boilerplate

vue-modern-boilerplate

A tweak-friendly starter project skeleton to build Vue.js single page apps or sites. Created through Vue CLI 3 and built on top of webpack, it uses modern JavaScript syntax with ES6 features via babel to start integrating the best tools in the frontend ecosystem.

Note: This is a personal vue.js starter boilerplate, it may not be a good approach for your project(s).

Development experience

  • Full flexibility. Tweak the config of each open source tool
  • Optimized for most apps. Reliable development server featuring live-reload, hot-module-replacement, lint-on-save, static assets handling & css extraction, ...
  • Pre-processor support. Pug, Scss/Sass, Less, Stylus or TypeScript compilation, just to name a few, powered by vue-loader. You can even use CSS Modules inside components with <style module>
  • Modern build tools. Build the .vue components as native web components shipping native ES2015 code to modern browsers that support it with auto fallback to a legacy bundle for olders browsers that do not
  • Improved website/app loading performance. Production-ready bundles optimized with minification for JS/CSS/HTML, auto vendor chunk splitting for better caching, HTML injection, offline mode with a Service Worker, PWA-ready features like ms-browserconfig, the manifest, a mobile-friendly meta-viewport or the app favicons. The goal is a Lighthouse/PageSpeed score of 90+/100 💉

Lighthouse

Under the hood

{ ... }

Requirements

Make sure you have the following installed:

Installation

# Clone the project and navigate into the directory
# of the repository, then install dependencies
yarn install

Build Setup

# Launch the dev server
yarn dev

# Build for production
yarn build

# Build the application targeting modern browsers
# with auto fallback for legacy
yarn build --modern

# Outputs a stringified version of the webpack
# config inside the root folder
yarn inspect:dev
yarn inspect:prod

# see: https://cli.vuejs.org/guide/cli-service.html

Remember to update the following files to suit your application before building for production:

  • .env and app.config.js
  • /public/ directory

Contributions are always welcome

  • Fork It And Make Your Own™

  • Tweak the code as you wish

  • Submit an issue or PR!

License

This is free software; you can redistribute it and/or modify it under the terms of the MIT license.