This repository contains the Vue frontend code for the ilmastodieetti.fi/climatediet.fi application. This version of the code was initially written in 2019 and the source was opened in 2024. The git history before the opening has been removed to simplify the opening process.
├───dist // the release build directory. Files are put here on npm run build
├───public // an "escape hatch" for static content. Put into the output as-is
├───src // the source code directory
│ │ App.vue // Vue entry point, defines the whole page layout
│ │ main.ts // initializer script
│ │ router.ts // manages vue-router for transfers between tabs
│ ├───assets // static files (images, css...). These are managed in webpack during build
│ ├───components // generic UI components
│ ├───locale // localization files
│ ├───stores // state management (Vuex) files
│ │ └───modules // view specific state files
│ ├───views // the higher level view components (i.e. tabs)
│ │ ├───housing
│ │ │ ├───subForms
│ │ │ │ HousingView.vue
│ │ │ ...
└───tests
└───unit // unit tests. Can be run with npm run test
housingview.spec.ts
startview.spec.ts
...
Use Node >=18
npm install
In the project directory, you can run:
npm run dev
npm run build
npm run test
npm run lint
npm run format
The development version of the backend API is available at: https://ilmastodieetti-dev-storage.azurewebsites.net/api/v1/
Run Prettier formatting before committing changes.
If using VS Code, the easiest way to do this is to enable autoformatting as follows:
Install "Prettier - Code Formatter" to VS Code (restart VS Code) Open settings.json (Ctrl + P -> search for settings.json) Add the following settings:
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
If you don't want to autoformat all types of files, then specify the file types to be formatted:
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},