Overview
Metronic comes with a flexible file structure that can be easily used for small to
large scope projects.
This section will explain the entire file structure and how to adapt it to your project.
| Path | Description |
|---|---|
| /dist |
The built output, run command yarn build to
create it.
|
| /node_modules |
The package.json file in the app root defines
what libraries will be installed into
node_modules/ when you run
yarn install.
|
| /public | Contains static theme files. |
| /public/media | Folder contains all image, icons and SVG files. |
| /src/assets/sass/style.scss |
Main style file, imports all scss file used for layout and components. This style file is
imported inside
/src/App.vue.
|
| /src/assets/ts |
Contains theme common ts components. These ts component
files are used to initialize theme interactive parts, such as
drawer, scroll, menu etc., you can check initialization
example in file /src/core/keenthemes.ts.
|
| /src/components |
Folder contains all components used in the demo pages (folder
/src/views).
|
| /src/core/config/DefaultLayoutConfig.ts | Layout configuration, you can update layout default values or update and preview them dynamically in theme Layout Builder. |
| /src/core/config/MainMenuConfig.ts |
Menu configuration, to get started with clean menu you can use
/src/core/config/CleanMainMenuConfig.ts.
|
| /src/core/helpers | Contains files with theme helper functions. |
| /src/core/plugins/keenthemes.ts | File contains ts component initialization functions. |
| /src/core/services/ApiService.ts |
Class which can be used to make a http requests to your api,
you can find usage examples in
/src/store/auth.ts
for more info check
Api setup doc. |
| /src/core/services/JwtService.ts | Class is used to get, save and destroy jwt token form localStorage. |
| /src/core/services/LayoutService.ts | Class used to initialize theme layout. |
| /src/ layouts | Folder contains all layout vue components. |
| /src/router |
Folder contains index.ts which is default
vue-router config used by theme, to get started with clean
router use clean.ts config. For more info about the
vue-router, check
vue-router official doc.
|
| /src/stores | Folder contains Pinia stores. |
| /src/views | Vue components for theme demo pages |
| /src/App.vue | Core vue component, contains vue root router-view and all style imports |
| index.html |
Change<title>, insert additional<link>
and <script> tags into this file.
|
2024©
Keenthemes
