https://github.com/matuscongrady/friendly-vue-starter
Full featured Vue.js starter project for browser apps
https://github.com/matuscongrady/friendly-vue-starter
apollo-client eslint graphql javascript prettier vue vue-router vuex webpack
Last synced: 12 months ago
JSON representation
Full featured Vue.js starter project for browser apps
- Host: GitHub
- URL: https://github.com/matuscongrady/friendly-vue-starter
- Owner: matuscongrady
- License: mit
- Created: 2017-08-01T12:27:01.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-27T11:48:08.000Z (over 8 years ago)
- Last Synced: 2024-05-29T03:14:53.516Z (about 2 years ago)
- Topics: apollo-client, eslint, graphql, javascript, prettier, vue, vue-router, vuex, webpack
- Language: JavaScript
- Size: 255 KB
- Stars: 36
- Watchers: 1
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Friendly-vue-starter
Full featured Vue.js starter project for browser apps.
Main focus:
* Developer experience
* Performance
* Future-proofness
### Features
* Vue.js 2 with single file components, Sass(Scss) and [vue-class-component](https://github.com/vuejs/vue-class-component) / [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)
* GraphQL (via [apollo-client](https://github.com/apollographql/apollo-client))
* [Vuex](https://vuex.vuejs.org/en/getting-started.html) state management
* [Vue-router](https://router.vuejs.org/en/essentials/getting-started.html)
* [Vue-i18n](http://kazupon.github.io/vue-i18n/en/)
* Webpack 3
* Hot-module-replacement for Vue-components, Vuex store and intl-messages!
* Critical-path css extraction via [critical](https://github.com/addyosmani/critical)
* Full ES6/ES7 support and automatic polyfilling based on browsers you wish to support, via [babel-preset-env](https://github.com/babel/babel-preset-env)
* Eslint with [airbnb config](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) and [Prettier](https://github.com/prettier/prettier) integration
* Route-based code splitting
* Bundle-analyzer, bundle size optimization, friendly and beautiful webpack messages, and more
### Usage
```
git clone https://github.com/mcongy/friendly-vue-starter
cd friendly-vue-starter
npm install
npm run dev
```
```npm run dev``` to start the webpack-dev-servcer in development mode with hot-reloading
```npm run build``` to build and optimize the application for production use
```npm run analyze``` to build and analyze the production bundle via webpack-bundle-analyzer
```npm run clean``` to remove node_modules, package.lock, yarn.lock and dist folder
```npm run lint``` to run Eslint on whole project
```npm run check``` to check for outdated packages
```npm run serve:build``` to serve production build with spa-http-server (works with history API routing)
There's also a [husky](https://github.com/typicode/husky) pre-commit hook included, that will run ```eslint``` before commiting and possibly abort the operation if there are any errors.
You can also add things like flow-typechecking and unit/e2e testing here, to ensure quality of your git repository
### Roadmap
- [ ] Add unit-tests (propably via [vue-test-utils](https://github.com/vuejs/vue-test-utils) when it's finished)
- [ ] Add e2e tests (probably via [testcafe](https://github.com/DevExpress/testcafe) and [testcafe-vue-selectors](https://github.com/devexpress/testcafe-vue-selectors))
- [ ] Possibly integrate Typescript (there's an ongoing work to improve typescript experience in Vue.js)
- [ ] Possibly integrate Flow-type (currently there a lot of small issues that make flow-type (in my opinion) not-worth to use with Vue.js, but this might change in the future)
### Caveats
* Prettier will format first line of script tags in .vue files badly. There is an ongoing work on better Vue.js integration (even for templates!)
### Backend
Friendly-vue-starter is configured to use GraphQL. You can use any GraphQL backend, your custom backend or BaaS solution like [graph.cool](https://www.graph.cool/) or [scaphold.io](https://scaphold.io/)
If you do not want or can't use a GraphQL backend, you can simply remove apollo-client and fetch your data using any HTTP client (I recommend using [axios](https://github.com/mzabriskie/axios) or [unfetch](https://github.com/developit/unfetch) )
### Contributors
Matúš Čongrády