- Server-side rendering with asynchronous data management
- Prerendering with static-site-generator (suitable for static hosting like GitHub Pages)
- Progressive Web App (hits 100 out of 100 Lighthouse audit score)
- Based on Koa web framework instead of Express
- Creates raster icons of all possible sizes from a single vector image
- Vue-router and Vuex data store included
- Hot module replacement and linting in development
- Clean PostCSS-only solution for styling
This is a template for vue-cli. Make sure you've installed it, before you go any further:
$ npm install -g vue-cliThen you can scaffold the project:
$ vue init iloginow/vue-base-template my-projectEnter the project directory and install the dependecies:
$ cd my-project
$ npm installFinally, run the dev-server:
$ npm run devHopefully, you'll be able to see the app in your browser at http://localhost:3000
| Command | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Build the app for production |
npm run icons |
Generate png icons from an svg image based on icons.json setup |
npm run lint |
Run ESLint to examine the /src directory |
Make sure you've run
npm run buildbefore you try one of the following:
| Command | Description |
|---|---|
npm start |
Start the production server |
npm run generate |
Build a static Vue app based on the routes from generator.config.js |
├── public # Will be created by "npm run build"
├── static # Will be created by "npm run generate"
├── src # Source files
│ ├── components # All single file components (including App.vue)
│ ├── images # Icons and images (create audio and/or video directories if needed)
│ ├── routes # Should deliver config object for vue-router
│ ├── store # Should deliver module (or modules) for Vuex store
│ ├── styles # Config files for all PostCSS plugins (mixins, css-variables etc...)
│ ├── app.js # Vue app factory
│ ├── server.js # Server entry
│ ├── client.js # Client entry
│ ├── index.html # Main html template
│ └── manifest.json # PWA related stuff
├── server.js # Production server
├── dev-server.js # Development server
├── generator.js # Static site generator
├── generator.config.js # Specify routes that should be prerendered
├── postcss.config.js # Specify PostCSS plugins, import stuff from src/styles
├── webpack.config.js # Unified webpack config (use env.variables to distinguish)
├── icons.json # Icon generator data file (defines input and output files)
└── package.json # All npm needs to know about your app ;)