Skip to content

[feat] Translation of docs>guide>essentials #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Mar 4, 2025
Merged
1 change: 0 additions & 1 deletion .vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,6 @@ export const sidebar: ThemeConfig['sidebar'] = {
text: 'Wiązanie elemtów wejściowych formularza',
link: '/guide/essentials/forms'
},
{ text: 'Form Input Bindings', link: '/guide/essentials/forms' },
{ text: 'Obserwatorzy', link: '/guide/essentials/watchers' },
{ text: 'Template Refs', link: '/guide/essentials/template-refs' },
{
Expand Down
58 changes: 29 additions & 29 deletions src/guide/essentials/application.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
# Creating a Vue Application {#creating-a-vue-application}
# Tworzenie aplikacji Vue {#creating-a-vue-application}

## The application instance {#the-application-instance}
## Instancja aplikacji {#the-application-instance}

Every Vue application starts by creating a new **application instance** with the [`createApp`](/api/application#createapp) function:
Każda aplikacja Vue zaczyna się od utworzenia nowej **instancji aplikacji** za pomocą funkcji [`createApp`](/api/application#createapp):

```js
import { createApp } from 'vue'

const app = createApp({
/* root component options */
/* opcje komponentu głównego */
})
```

## The Root Component {#the-root-component}
## Komponent główny {#the-root-component}

The object we are passing into `createApp` is in fact a component. Every app requires a "root component" that can contain other components as its children.
Obiekt, który przekazujemy do `createApp`, jest w rzeczywistości komponentem. Każda aplikacja wymaga „komponentu głównego (root component)”, który może zawierać inne komponenty jako swoje elementy podrzędne.

If you are using Single-File Components, we typically import the root component from another file:
Jeśli używasz komponentów pojedynczego pliku (Single-File Components), zazwyczaj importujemy komponent główny z innego pliku:

```js
import { createApp } from 'vue'
// import the root component App from a single-file component.
// importowanie komponentu głównego App z pliku pojedynczego komponentu
import App from './App.vue'

const app = createApp(App)
```

While many examples in this guide only need a single component, most real applications are organized into a tree of nested, reusable components. For example, a Todo application's component tree might look like this:
Chociaż wiele przykładów w tym przewodniku wymaga tylko jednego komponentu, większość rzeczywistych aplikacji jest zorganizowana w drzewo zagnieżdżonych, komponentów wielokrotnego użytku. Na przykład drzewo komponentów aplikacji Todo może wyglądać tak:

```
App (root component)
App (komponent główny)
├─ TodoList
│ └─ TodoItem
│ ├─ TodoDeleteButton
Expand All @@ -39,11 +39,11 @@ App (root component)
└─ TodoStatistics
```

In later sections of the guide, we will discuss how to define and compose multiple components together. Before that, we will focus on what happens inside a single component.
W kolejnych sekcjach przewodnika omówimy, jak definiować i komponować wiele komponentów razem. Zanim jednak to zrobimy, skupimy się na tym, co dzieje się wewnątrz pojedynczego komponentu.

## Mounting the App {#mounting-the-app}
## Montowanie aplikacji {#mounting-the-app}

An application instance won't render anything until its `.mount()` method is called. It expects a "container" argument, which can either be an actual DOM element or a selector string:
Instancja aplikacji nie wyrenderuje niczego, dopóki nie zostanie wywołana jej metoda `.mount()`. Oczekuje ona argumentu „container”, którym może być rzeczywisty element DOM lub selektor:

```html
<div id="app"></div>
Expand All @@ -53,13 +53,13 @@ An application instance won't render anything until its `.mount()` method is cal
app.mount('#app')
```

The content of the app's root component will be rendered inside the container element. The container element itself is not considered part of the app.
Zawartość komponentu głównego aplikacji zostanie wyrenderowana wewnątrz elementu kontenera. Sam element kontenera nie jest uważany za część aplikacji.

The `.mount()` method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance.
Metoda `.mount()` powinna być zawsze wywoływana po zakończeniu wszystkich konfiguracji aplikacji i rejestracji zasobów. Warto zauważyć, że zwracana wartość, w przeciwieństwie do metod rejestracji zasobów, to instancja komponentu głównego, a nie instancja aplikacji.

### In-DOM Root Component Template {#in-dom-root-component-template}
### Szablon komponentu głównego w DOM {#in-dom-root-component-template}

The template for the root component is usually part of the component itself, but it is also possible to provide the template separately by writing it directly inside the mount container:
Szablon dla komponentu głównego jest zazwyczaj częścią samego komponentu, ale można go również dostarczyć osobno, wpisując go bezpośrednio w kontener montowania:

```html
<div id="app">
Expand All @@ -73,41 +73,41 @@ import { createApp } from 'vue'
const app = createApp({
data() {
return {
count: 0
licznik: 0
}
}
})

app.mount('#app')
```

Vue will automatically use the container's `innerHTML` as the template if the root component does not already have a `template` option.
Vue automatycznie użyje `innerHTML` kontenera jako szablonu, jeśli komponent główny nie ma już opcji `template`.

In-DOM templates are often used in applications that are [using Vue without a build step](/guide/quick-start.html#using-vue-from-cdn). They can also be used in conjunction with server-side frameworks, where the root template might be generated dynamically by the server.
Szablony w DOM są często używane w aplikacjach, które [korzystają z Vue bez etapu kompilacji](/guide/quick-start.html#using-vue-from-cdn). Mogą być również używane w połączeniu z frameworkami po stronie serwera, gdzie główny szablon może być dynamicznie generowany przez serwer.

## App Configurations {#app-configurations}
## Konfiguracja aplikacji {#app-configurations}

The application instance exposes a `.config` object that allows us to configure a few app-level options, for example, defining an app-level error handler that captures errors from all descendant components:
Instancja aplikacji udostępnia obiekt `.config`, który pozwala konfigurować kilka opcji na poziomie aplikacji, na przykład definiowanie globalnego handlera błędów:

```js
app.config.errorHandler = (err) => {
/* handle error */
/* obsługa błędu */
}
```

The application instance also provides a few methods for registering app-scoped assets. For example, registering a component:
Instancja aplikacji oferuje także kilka metod do rejestrowania zasobów na poziomie aplikacji. Na przykład rejestrowanie komponentu:

```js
app.component('TodoDeleteButton', TodoDeleteButton)
```

This makes the `TodoDeleteButton` available for use anywhere in our app. We will discuss registration for components and other types of assets in later sections of the guide. You can also browse the full list of application instance APIs in its [API reference](/api/application).
To sprawia, że `TodoDeleteButton` jest dostępny do użycia w całej aplikacji. Omówimy rejestrację komponentów i innych typów zasobów w kolejnych sekcjach przewodnika. Możesz również przejrzeć pełną listę interfejsów API instancji aplikacji w jej [dokumentacji API](/api/application).

Make sure to apply all app configurations before mounting the app!
Upewnij się, że zastosowałeś wszystkie konfiguracje aplikacji przed jej zamontowaniem!

## Multiple application instances {#multiple-application-instances}
## Wiele instancji aplikacji {#multiple-application-instances}

You are not limited to a single application instance on the same page. The `createApp` API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets:
Nie jesteś ograniczony do jednej instancji aplikacji na stronie. API `createApp` pozwala na współistnienie wielu aplikacji Vue na tej samej stronie, każda z własnym zakresem konfiguracji i zasobów globalnych:

```js
const app1 = createApp({
Expand All @@ -121,4 +121,4 @@ const app2 = createApp({
app2.mount('#container-2')
```

If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a single Vue application instance on the entire page. Instead, create multiple small application instances and mount them on the elements they are responsible for.
Jeśli używasz Vue do wzbogacenia HTML renderowanego po stronie serwera i potrzebujesz Vue tylko do kontrolowania określonych części dużej strony, unikaj montowania jednej instancji Vue na całej stronie. Zamiast tego utwórz wiele małych instancji aplikacji i zamontuj je na elementach, za które są odpowiedzialne.
Loading