vue-quick-template

Vue.JS quick template with all for quick and handy start:

• Mobile-first designed components/pages
• 7 common components
• Progressive Web Application (PWA) ready (see all capable of PWA compared to Natives: https://whatwebcando.today/),
• Very detail comments about all things (Readable code)
• Preconfigured intergration with CircleCI, Codecov, Travis-CI (with pre-running-configures). Right now this repo is using Travis but Circle CI is also preconfigured.
• Preconfigured scripts to deploy on github.io and surge.sh. Modified register service to fix error: The path of the provided scope ('/') is not under the max scope allowed ('/vue-quick-template/'). Adjust the scope, move the Service Worker script, or use the Service-Worker-Allowed HTTP header to allow the scope. for domains like: loitd.github.io/vue-quick-template to make sure register service worker successfully.
• Social authentication with Google (vue-all-oauth) and Google integrated ready (as of Mar 2019)
• Full of pluggins available by default With additional pluggins beside common ones:
  • @babel/core lastest 7.3.3 instead of old default babel-core version 7.0.0-bridge.0
  • vue@cli v3.4
  • vuex v3.0.1
  • vue-router v3.0.1
  • @babel/preset-env (version 7) fixed some troubles from default preset 6 or preset 2015
  • bootstrap-vue for Bootstrap 4,
  • preconfigued fontawesome for FontAwesome 5,
  • sass-loader and node-sass for scss pre-processing
  • chartjs, vue-chartjs interated ready
  • Unit test with jest with test coverage, E2E test with nightwatch,

Status

Use Guide

Bootstrap-vue

• Add new demanded component into src/plugins/bootstrap-vue.js
• Using components as described in this document:

Octicons

• Add/remove and reconfigure Octicons in src/plugins/octicons.js

Demos

• Local Demo:

git clone https://github.com/loitd/vue-quick-template
npm install -g serve
cd vue-quick-template
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

• Online Demo:
  • https://loitd.github.io/vue-quick-template/

Git related

To pull from github to local

git pull origin master --allow-unrelated-histories

• Deploy on server:
  Need consider this guide: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Project setup (install global packages with npm make you dont have to add yarn to PATH)

Some dependencies need Python 2.7. Please install Python 2.7 and add to PATH first.

npm install yarn
npm install -g @vue/cli
yarn install

Configure PUBLICPATH if need in vue.config.js

publicPath: process.env.NODE_ENV === "production" ? "/vue-quick-template/" : "/",

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Run Vue UI

vue ui

Lints and fixes files

yarn run lint

Run your end-to-end tests

yarn run test:e2e

Run your unit tests

yarn run test:unit

Author

License