FastAPI spełnia bardzo dobrze moje backend-owe potrzeby, ale budowanie warstwy wizualnej opartej o Jinja jest trochę problematyczne i wprowadza bałagan. Stąd pomysł na opanowanie podstaw frontend, podobno najporściej zrobić to z Vue.js.
Pierwszy projekt: strona logowania i rejestracji
Instalacja node.js
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs
VUE CLI
sudo npm install -g @vue/cli
cd ./projekt
npm install
npm run serve
Hello world w Vue.js
Pojedynczy plik index.php:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script>
const App = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
})
</script>
</body>
</html>
Instalacja
vue create vue-app
Opcja domyślna to na razie Vue 2 i z takiego będę korzystał:
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
Uruchomienie projektu:
cd vue-app
npm run serve
Zasada działania
Zawartość katalogu src:
.
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
└── main.js
Komponenty są przechowywane w plikach .vue w każdym z nich znajdują się sekcje:
<template><script>- dane i logika komponentu (jedyne wymagane pole - name)<style>- CSS