The script follows conventional Laravel+Vue.js folder structure. The folders & files are grouped and placed in desired location. Here is the folder structure of Laravel application.
All the folders except "node_modules" are part of Laravel application. In order to install npm dependency, you get a folder called "node_modules" in your script.
I believe you already have knowledge of Laravel therefore I am not providing details of its folder structure. If you want to know more about it you can click here.
Here is the detailed folder structure of resource folder where all the Vue components, assets (Images, Javascript, Stylesheets & Plugins are place).
The script use only single Laravel blade file which is placed under resources/views/home.blade.php, which actually imports a layout called master.blade.php which is place at resources/views/layouts folder. This file is responsible for generating basic layout of the script. It includes bundled stylesheets in the head tag & bundled js files just above the body tags. To make less request to the server, all the stylesheets & js files are bundled into single file.
Here are details of all the folders available in resources/assets folder.
Images:
This includes all the images that are referred in any style sheet or js file. Make sure you put those images in this folder only. During compilation, you will get all these files processed at public/images folder.
Js:
This folder is basically the most important container for this script. As all the Vue components are basically Javascript file therefore they are placed under this folder. This includes three sub folders:
components:
These are small snippets which can be put inside any Vue script or components. For details visit here.
layouts:
It is basically layout structure of this script. It includes vue files divided into multiple segment like header.vue, footer.vue etc. The file guest-page.vue renders guest page (like login page which can be accessed without login). The file default-page.vue renders application page (which will be accessible only after login) & error-page.vue which renders error page layout.
services:
These are basically helper javascript files.
views:
These are pages which will be rendered when you navigate to a certain page. For example, If you navigate to {your_domain}/login, the file resources/assets/js/views/authentication/login.vue is rendered. All the files are grouped by modules.
Here are details of file available in resources/assets/js
app.js:
This is entry point of all the Javascript files. It is also a place where you define new Vue app.
bootstrap.js:
It is default Javascript file provide by Laravel where you can import various dependencies including Axios, Vue-Router, Vuex etc.
custom.js:
It is basically jQuery scripts written for layout design.
routes.js:
It is used to define the Vue router path and the component it will render for the page. It is like routes.php or web.php file in Laravel. For details visit here.
store.js:
It is used to define Vuex store. For details visit here.
Plugins:
This folder contains all the external plugins which you want to use in this script. For example, this script uses jQuery plugin which is place under this folder. Similarly, Bootstrap files are placed in this folder. If you are going to use any other plugin, I strongly suggest you to put under this folder. You can import the style sheet of that plugin into resources/assets/saas/style.scss & combine the js of that plugin in webpack.mix.js file.
Style sheet:
Head tag includes single style sheet called style.css which includes all the style sheets including bootstrap, plugin style sheet and custom style sheet. Basically resources/assets/sass/style.scss is entry point of all the style sheets which imports all other style sheets.A custom.scss file is also available in resources/assets/sass folder where you can put all your custom css code. Mind the order of import of css in resources/assets/sass/style.scss file. If you import custom.scss file before other scss file, then your custom css code will be overridden by other css code.
When you deploy your application in live server, you need not to upload contents of "node_modules" folder & "resources/assets" folder. During compilation all the required files are bundled and placed at public folder.
If you have an query regarding this folder structure, please raise a ticket at http://support.scriptmint.com.