diff --git a/src/guide/scaling-up/tooling.md b/src/guide/scaling-up/tooling.md index fdda80b3..76deff1d 100644 --- a/src/guide/scaling-up/tooling.md +++ b/src/guide/scaling-up/tooling.md @@ -2,28 +2,28 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme' -# Tooling {#tooling} +# Narzędzia {#tooling} -## Try It Online {#try-it-online} +## Wypróbuj w przeglądarce {#try-it-online} -You don't need to install anything on your machine to try out Vue SFCs - there are online playgrounds that allow you to do so right in the browser: +Nie musisz nic instalować na swojej maszynie, aby sprawdzić jak działają SFC w Vue - istnieją interaktywne piaskownice, które pozwalają poeksperymentować bezpośrednio w przeglądarce: -- [Vue SFC Playground](https://play.vuejs.org) - - Always deployed from latest commit - - Designed for inspecting component compilation results -- [Vue + Vite on StackBlitz](https://vite.new/vue) - - IDE-like environment running actual Vite dev server in the browser - - Closest to local setup +- [Piaskownica Vue SFC](https://play.vuejs.org) + - Zawsze zdeployowana z ostatniego commita + - Zaprojektowana celem analizy rezultatów kompilacji komponentów jednoplikowych +- [Starter Vue + Vite na StackBlitz](https://vite.new/vue) + - Środowisko z wbudowanym IDE, uruchamiające serwer deweloperski Vite w przeglądarce + - Bardzo blisko symuluje lokalne środowisko -It is also recommended to use these online playgrounds to provide reproductions when reporting bugs. +Bardzo zachęcamy również używanie tych narzędzi, aby dostarczać reprodukcje przy zgłaszaniu bugów. -## Project Scaffolding {#project-scaffolding} +## Przygotowywanie Projektu {#project-scaffolding} ### Vite {#vite} -[Vite](https://vitejs.dev/) is a lightweight and fast build tool with first-class Vue SFC support. It is created by Evan You, who is also the author of Vue! +[Vite](https://vitejs.dev/) to bardzo lekkie i szybkie narzędzie budowania projektu z pierwszorzędowym wsparciem dla Vue SFC. Zostało stworzone przez Evana You, który również jest autorem Vue! -To get started with Vite + Vue, simply run: +Aby zacząć pracę z Vite + Vue, wywołaj polecenie: @@ -56,145 +56,145 @@ To get started with Vite + Vue, simply run: -This command will install and execute [create-vue](https://github.com/vuejs/create-vue), the official Vue project scaffolding tool. +To polecenie zainstaluje i wywoła [create-vue](https://github.com/vuejs/create-vue), oficjalne narzędzie do setupowania projektów. -- To learn more about Vite, check out the [Vite docs](https://vitejs.dev). -- To configure Vue-specific behavior in a Vite project, for example passing options to the Vue compiler, check out the docs for [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#readme). +- Aby dowiedzieć się więcej o Vite, odwiedź [dokumentację Vite](https://vitejs.dev). +- Aby skonfigurować zachowanie Vue w projekcie Vite, na przykład, aby przekazać jakieś opcje do kompilatora Vue, odwiedź dokumentację dla [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#readme). -Both online playgrounds mentioned above also support downloading files as a Vite project. +Oba narzędzia przytoczony wyżej również wspierają pobieranie plików jako gotowego projektu Vite. ### Vue CLI {#vue-cli} -[Vue CLI](https://cli.vuejs.org/) is the official webpack-based toolchain for Vue. It is now in maintenance mode and we recommend starting new projects with Vite unless you rely on specific webpack-only features. Vite will provide superior developer experience in most cases. +[Vue CLI](https://cli.vuejs.org/) to oficjalny zestaw narzędzi dla Vue oparty na webpacku. Jest on obecnie w fazie maintenance i zalecamy, aby tworzyć nowe projekty z użyciem Vite o ile nie są Tobie potrzebne funkcjonalności specyficzne dla webpacka. Vite dostarczy o wiele lepsze developer experience w większości przypadków. -For information on migrating from Vue CLI to Vite: +Aby dowiedzieć się o migracji z Vue CLI do Vite: -- [Vue CLI -> Vite Migration Guide from VueSchool.io](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/) -- [Tools / Plugins that help with auto migration](https://github.com/vitejs/awesome-vite#vue-cli) +- [Poradnik migracji Vue CLI -> Vite od VueSchool.io](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/) +- [Narzędzia / Wtyczki które pomagają z auto migracją](https://github.com/vitejs/awesome-vite#vue-cli) -### Note on In-Browser Template Compilation {#note-on-in-browser-template-compilation} +### O kompilacji szablonów w środowisku przeglądarki {#note-on-in-browser-template-compilation} -When using Vue without a build step, component templates are written either directly in the page's HTML or as inlined JavaScript strings. In such cases, Vue needs to ship the template compiler to the browser in order to perform on-the-fly template compilation. On the other hand, the compiler would be unnecessary if we pre-compile the templates with a build step. To reduce client bundle size, Vue provides [different "builds"](https://unpkg.com/browse/vue@3/dist/) optimized for different use cases. +Gdy używasz Vue bez kroku budowania, szablony komponentów definiowane są bezpośrednio w kodzie HTML strony lub jako ciągi znaków w JavaScript. W tego typu przypadkach, Vue musi być również użyte razem z kompilatorem szablonów dla przeglądarki, aby wedle potrzeb kompilować tego typu szablony. Z drugiej strony, kompilator nie jest potrzebny jeśli prekompilujemy szablony na etapie budowania projektu. Aby zmniejszyć rozmiar paczki, Vue dostarcza [różne "wersje"](https://unpkg.com/browse/vue@3/dist/) zoptymalizowane pod różne przypadki. -- Build files that start with `vue.runtime.*` are **runtime-only builds**: they do not include the compiler. When using these builds, all templates must be pre-compiled via a build step. +- Pliki wersji zaczynające się na `vue.runtime.*` są **wersjami runtime-only**: nie zawierają one kompilatora. W przypadku używania ich wszystkie szablony muszą być pre-kompilowane na etapie budowania projektu. -- Build files that do not include `.runtime` are **full builds**: they include the compiler and support compiling templates directly in the browser. However, they will increase the payload by ~14kb. +- Pliki wersji nie zawierające `.runtime` są **wersjami pełnymi**: zawierają kompilator i wspierają kompilowanie szablonów bezpośrednio w przeglądarce. Jednakże, zwiększają rozmiar paczki o ~14kb. -Our default tooling setups use the runtime-only build since all templates in SFCs are pre-compiled. If, for some reason, you need in-browser template compilation even with a build step, you can do so by configuring the build tool to alias `vue` to `vue/dist/vue.esm-bundler.js` instead. +Domyślnie, nasze konfiguracje narzędzi używają wersji runtime-only, z tego powodu że podczas budowania projektu wszystkie szablony w SFC są prekompilowane. Jeśli z jakiegoś powodu potrzebujesz kompilacji szablonów w przeglądarce pomimo kroku budowania, możesz skonfigurować narzędzie budowania projektu by aliasować `vue` na `vue/dist/vue.esm-bundler.js`. -If you are looking for a lighter-weight alternative for no-build-step usage, check out [petite-vue](https://github.com/vuejs/petite-vue). +Jeśli szukasz lżejszej, alternatywnej wersji Vue dla projektów bez kroku budowania, zobacz [petite-vue](https://github.com/vuejs/petite-vue). -## IDE Support {#ide-support} +## Wsparcie IDE {#ide-support} -- The recommended IDE setup is [VS Code](https://code.visualstudio.com/) + the [Vue - Official extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar). The extension provides syntax highlighting, TypeScript support, and intellisense for template expressions and component props. +- Rekomendowane przez IDE to [VS Code](https://code.visualstudio.com/) oraz [wtyczka Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (wcześniej Volar). Ta wtyczka dostarcza kolorwanie składni, wsparcie dla TypeScripta oraz intellisense dla wyrażeń w szablonach i propsach komponentów. :::tip - Vue - Official replaces [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), our previous official VS Code extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects. + Wtyczka Vue - Official zastępuje [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), poprzednią oficjalną wtyczkę do VS Code dla Vue 2. Jeśli masz obecnie zainstalowany Vetur upewnij się, aby go wyłączyć pracując przy projektach w Vue 3. ::: -- [WebStorm](https://www.jetbrains.com/webstorm/) also provides great built-in support for Vue SFCs. +- [WebStorm](https://www.jetbrains.com/webstorm/) również posiada dobre wbudowane wsparcie dla Vue SFC. -- Other IDEs that support the [Language Service Protocol](https://microsoft.github.io/language-server-protocol/) (LSP) can also leverage Volar's core functionalities via LSP: +- Inne IDE które wspierają [Language Service Protocol](https://microsoft.github.io/language-server-protocol/) (LSP) mogą również wykorzystać główne funkcjonalności Volara: - - Sublime Text support via [LSP-Volar](https://github.com/sublimelsp/LSP-volar). + - Sublime Text wspiera przy pomocy [LSP-Volar](https://github.com/sublimelsp/LSP-volar). - - vim / Neovim support via [coc-volar](https://github.com/yaegassy/coc-volar). + - vim / Neovim wspierają przy pomocy [coc-volar](https://github.com/yaegassy/coc-volar). - - emacs support via [lsp-mode](https://emacs-lsp.github.io/lsp-mode/page/lsp-volar/) + - emacs wspiera przy pomocy [lsp-mode](https://emacs-lsp.github.io/lsp-mode/page/lsp-volar/) -## Browser Devtools {#browser-devtools} +## Narzędzia deweloperskie w przeglądarce {#browser-devtools} -The Vue browser devtools extension allows you to explore a Vue app's component tree, inspect the state of individual components, track state management events, and profile performance. +Narzędzia deweloperskie Vue dla przeglądarek pozwalają przeglądać drzewo komponentów w aplikacji Vue, podejrzeć stan konkretnych komponentów, śledzić zdarzenia zmiany stanu oraz profilować wydajność. -![devtools screenshot](https://raw.githubusercontent.com/vuejs/devtools/main/media/screenshot-shadow.png) +![Zrzut ekranu narzędzi deweloperskich](https://raw.githubusercontent.com/vuejs/devtools/main/media/screenshot-shadow.png) -- [Documentation](https://devtools.vuejs.org/) -- [Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) -- [Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) -- [Edge Extension](https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl) -- [Standalone Electron app](https://devtools.vuejs.org/guide/installation.html#standalone) +- [Dokumentacja](https://devtools.vuejs.org/) +- [Wtyczka dla Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) +- [Wtyczka dla Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) +- [Wtyczka dla Edge](https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl) +- [Samodzielna aplikacja w Electron](https://devtools.vuejs.org/guide/installation.html#standalone) ## TypeScript {#typescript} -Main article: [Using Vue with TypeScript](/guide/typescript/overview). +Główny artykuł: [Używanie Vue z TypeScriptem](/guide/typescript/overview). -- [Vue - Official extension](https://github.com/vuejs/language-tools) provides type checking for SFCs using `