Pierwsze kroki
Witamy w samouczku Vue!
Celem tego samouczka jest szybkie pokazanie, jak to jest pracować z Vue bezpośrednio w przeglądarce. Nie ma on być wyczerpujący i nie musisz zrozumieć wszystkiego, zanim przejdziesz dalej. Po jego ukończeniu warto jednak zapoznać się z Przewodnikiem w którym każdy temat został omówiony bardziej szczegółowo.
Wymagania wstępne
Samouczek zakłada podstawową znajomość HTML, CSS i JavaScript. Jeśli jesteś zupełnie nowy w budowaniu front-endu, może nie być najlepszym pomysłem zaczynanie od razu do frameworka jako pierwszy krok - opanuj podstawy, a następnie wróć! Wcześniejsze doświadczenie z innymi frameworkami pomaga, ale nie jest wymagane.
Jak korzystać z tego samouczka
Możesz edytować kod po prawejponiżej i natychmiast zobaczyć aktualizację wyniku. Każdy krok przedstawi podstawową funkcję Vue, a od użytkownika oczekuje się ukończenia kodu w celu uruchomienia wersji demonstracyjnej. Jeśli utkniesz, możesz skorzystać z przycisku „Pokaż odpowiedź!”, który ujawni działający kod. Postaraj się nie polegać na nim zbyt często - szybciej nauczysz się samodzielnie.
Jeśli jesteś doświadczonym programistą z doświadczeniem z Vue 2 lub innych frameworków, istnieje kilka ustawień, które możesz dostosować, aby jak najlepiej wykorzystać ten samouczek. Jeśli jesteś początkującym programistą, zalecamy skorzystanie z ustawień domyślnych.
Szczegóły ustawień samouczka
-
Vue oferuje dwa style API: Options API i Composition API. Ten samouczek został zaprojektowany tak, aby działał dla obu - możesz wybrać preferowany styl za pomocą przełączników Preferencje API u góry. Dowiedz się więcej o stylach API..
-
Możesz także przełączać się między trybem SFC lub HTML. Ten pierwszy pokaże przykłady kodu w formacie Single-File Component (SFC), który jest używany przez większość programistów, gdy używają Vue z krokiem kompilacji. Tryb HTML pokazuje użycie bez kroku kompilacji.
TIP
Jeśli zamierzasz używać trybu HTML bez kroku kompilacji we własnych aplikacjach, upewnij się, że zmieniłeś import na:
import { ... } from 'vue/dist/vue.esm-bundler.js'wewnątrz skryptów lub skonfiguruj narzędzie kompilacji, aby odpowiednio rozumiało vue. Przykładowa konfiguracja dla Vite:
export default {
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js'
}
}
}Więcej informacji można znaleźć w sekcji przewodnika po narzędziach..
Gotowy? Kliknij "Następny", aby rozpocząć.