Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/larsdouweschuitema/vue-webpack-boilerplate
Vue Webpack Boilerplate
https://github.com/larsdouweschuitema/vue-webpack-boilerplate
boilerplate eslint javascript jest nightwatch sass vue vue-webpack-boilerplate webpack webpack4 yarn
Last synced: about 1 month ago
JSON representation
Vue Webpack Boilerplate
- Host: GitHub
- URL: https://github.com/larsdouweschuitema/vue-webpack-boilerplate
- Owner: larsdouweschuitema
- License: mit
- Created: 2019-10-15T07:06:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T11:52:55.000Z (about 2 years ago)
- Last Synced: 2023-03-08T06:34:12.708Z (almost 2 years ago)
- Topics: boilerplate, eslint, javascript, jest, nightwatch, sass, vue, vue-webpack-boilerplate, webpack, webpack4, yarn
- Language: JavaScript
- Homepage:
- Size: 2.85 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
Vue Webpack Boilerplate
A lean webpack boilerplate for Vue including hot-reloading, linting, unit testing and end-to-end testing. By lean we mean that we still want to give you the freedom in configuring your project. Think about choices like:
- Router e.g. `vue-router`
- State management e.g. `vuex`
This boilerplate is far from opionated. As said before, we want to give you as much freedom that is possible with the minimal required setup. The reason we picked Webpack, is that it gives you that freedom of configuring things, but you don't have to. More can be said, as we also picked `jest` and `nightwatch` for our test setup, that is because we want to give you a minimal working setup, but feel free to change it as you want within your own project. And that counts for everything else that you can think of.
## Table of contents
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Testing](#testing)
- [Tech stack](#tech-stack)
- [Features](#features)
- [Contributing](#contributing)
- [Licenses](#licenses)
## Prerequisites
Make sure you have installed all of the following prerequisites on your development machine:
- Node.js - [Download & Install Node.js](https://nodejs.org/en/download/)
- Yarn package manager - [Download & Install Yarn](https://yarnpkg.com/en/docs/install#mac-stable)
## Installation
Clone the repository and change the directory
```bash
$ git clone https://github.com/larsdouweschuitema/vue-webpack-boilerplate && cd vue-webpack-boilerplate
```
Install dependencies using `npm` or `yarn`
```
$ yarn install
```
```
$ npm install
```
Run app in development mode
```
$ yarn start
```
Create production build
```
$ yarn build
```
## Testing
Unit testing using `jest`
```
$ yarn run unit
```
End-to-end testing using `nightwatch`
```
$ yarn run e2e
```
End-to-end testing with a different environment
```
$ yarn run e2e --env production
```
Run all tests
```
$ yarn run test
```
## Tech stack
- Package manager `yarn`
- Module bundler `webpack`
- Client-side framework `vue`
- Linter `eslint`
- Unit testing `jest`
- End-to-end testing using `nightwatch`
- Pre-processor `sass` for styling components
## Features
- Single file components using `vue-loader`
- Linting on save using `eslint`
- CSS extraction on production using `mini-css-extract-plugin`
- Hot reloading
- Source maps
- Auto generated file including root element using `html-webpack-plugin` and `html-webpack-root-plugin`
- Split development and production `webpack` configurations achieved through `webpack-merge`
- Minified JavaScript in production using `uglifyjs-webpack-plugin`
## Contributing
To contribute to this repository see the [CONTRIBUTING.md](CONTRIBUTING.md) file for details
## Licenses
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
