iliutastoica / greekdev-template-vue-spa

Vue.js S.P.A. template by Greek Developer

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Single Page Application Template with Vue.js / Vuex / Vue-Router

This is a template for a single page application using vue, vuex & vue-router. Routes are defined in ./src/web/_routes.js and the global state management is defined in ./src/web/_store.js

Installation

  • npm i -g parcel-bundler
  • npm install
  • npm run dev

Project layout

  • Source code is located in ./src/

    • web app source code is located in ./src/web/
    • PWA manifest file should have a .webmanifest extension for compatibility with parcel.
  • Distributable artifacts are generated in ./dist/

    • web app artifacts are generated in ./dist/web/

Developing

Add new page/route

  1. Create a new .vue file (preferably in ./src/web/vues/)
  2. Edit ./src/web/_router.js
    1. Add an import statement for the new file (ex import newpage from ./src/web/newpage.vue)
    2. Add a route for the new file (ex { path: '/newpage', component: newpage })

Tips

build dependency graph...

depcruise --exclude "^node_modules" --output-type dot src | c:\resources\bins\graphviz-dot\dot -T svg >dependencygraph.svg

About

Vue.js S.P.A. template by Greek Developer


Languages

Language:Vue 39.0%Language:JavaScript 37.8%Language:HTML 22.4%Language:CSS 0.8%