Skip to content
Snippets Groups Projects
README.md 1.37 KiB
Newer Older
Trygve Jørgensen's avatar
Trygve Jørgensen committed
# idatt2106_2024_02_frontend

Trygve Jørgensen's avatar
Trygve Jørgensen committed
This template should help get you started developing with Vue 3 in Vite.
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
## Recommended IDE Setup
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
## Type Support for `.vue` Imports in TS
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
## Customize configuration
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
See [Vite Configuration Reference](https://vitejs.dev/config/).
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
## Project Setup
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
```sh
npm install
```
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
### Compile and Hot-Reload for Development
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
```sh
npm run dev
```
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
### Type-Check, Compile and Minify for Production
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
```sh
npm run build
```
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
### Run Unit Tests with [Vitest](https://vitest.dev/)
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
```sh
npm run test:unit
```
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
```sh
npm run test:e2e:dev
```
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
This runs the end-to-end tests against the Vite development server.
It is much faster than the production build.
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
```sh
npm run build
npm run test:e2e
```
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
### Lint with [ESLint](https://eslint.org/)
Trygve Jørgensen's avatar
Trygve Jørgensen committed

Trygve Jørgensen's avatar
Trygve Jørgensen committed
```sh
npm run lint
```