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 / vue-property-decorator
- GraphQL (via apollo-client)
- Vuex state management
- Vue-router
- Vue-i18n
- Webpack 3
- Hot-module-replacement for Vue-components, Vuex store and intl-messages!
- Critical-path css extraction via critical
- Full ES6/ES7 support and automatic polyfilling based on browsers you wish to support, via babel-preset-env
- Eslint with airbnb config and 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 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 when it's finished)
- Add e2e tests (probably via testcafe and 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 or 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 or unfetch )
Contributors
Matúš Čongrády