📂Folder Structure

Since Light Able comes with a gulp, it has minor differences in structure but one can pick any one and start making changes, both are totally independent.

Vue.JS

└── 📁 public
 |    ├── favicon.svg
 |    └── index.html
├── 📁 src
 |    └── 📁 assets
 |    |    ├──  📁 css
 |    |    ├──  📁 fonts
 |    |    ├──  📁 images
 |    |    ├──  📁 json
 |    |    └──  favicon.svg
 |    |
 |    └── 📁  components
 |    |    ├──  📁 common
 |    |    ├──  c-footer.vue
 |    |    ├──  c-menu.vue
 |    |    ├──  c-navbar.vue
 |    |    ├──  footer.vue
 |    |    ├──  page-header.vue
 |    |    ├──  right-bar.vue
 |    |    └──  slidebarar.vue
 |    |
 |    └── 📁  layout
 |    |    ├──  c-main.vue
 |    |    ├──  c-vertical.vue
 |    |    ├──  c-navbar.vue
 |    |    ├──  component.vue
 |    |    ├──  layout-2.vue
 |    |    ├──  horizontal.vue
 |    |    ├──  main.vue
 |    |    └──  vertical.vue
 |    |
 |    └── 📁  router
 |    |    ├──  index.js
 |    |    └──  router.js
 |    |
 |    └── 📁  state
 |    |    ├──  📁 modules
 |    |    ├──   helper.js
 |    |    └──   store.js
 |    |
 |    └──  📁 views
 |    |     ├──    📁  components       
 |    |     └──    📁  live-preview  
 |    |
 |    ├──   App.vue 
 |    ├──   authutils.js
 |    └──   main.js    
 |    ├──  .gitingore
├── app.config.json
├── jsconfig.json
├── package.json
└── vue.config.js

Light Able Vue Folders Structure

File/Folder	Path	Description
📂Light Able	root:	The main folder of our project.
📁public	public/	Contains static assets like favicon and html
📁 src	src/	Contains Vue components, routers, layouts etc.