Szybki start ​

Wypróbuj Vue Online ​

• Aby szybko zapoznać się z Vue, możesz wypróbować go bezpośrednio w naszym Interaktywnym demo.

• Jeśli wolisz prostą konfigurację HTML bez żadnych kroków kompilacji, możesz użyć tego JSFiddle jako twój punkt startowy.

• Jeśli znasz już Node.js i koncepcję narzędzi do kompilacji, możesz również wypróbować pełną konfigurację kompilacji bezpośrednio w przeglądarce na StackBlitz.

Tworzenie aplikacji Vue ​

W tej sekcji przedstawimy, jak zbudować szkielet Vue Single Page Application na komputerze lokalnym. Utworzony projekt będzie korzystał z konfiguracji kompilacji opartej na Vite i umożliwi nam korzystanie z Vue Single-File Components (SFC).

Upewnij się, że masz zainstalowaną aktualną wersję Node.js i że Twój bieżący katalog roboczy to ten, w którym zamierzasz utworzyć projekt. Uruchom następujące polecenie w wierszu poleceń (bez znaku $):

$ npm create vue@latest

$ pnpm create vue@latest

$ yarn create vue@latest

$ bun create vue@latest

To polecenie zainstaluje i uruchomi create-vue, oficjalne narzędzie do tworzenia szkieletów projektów Vue. Zostaną wyświetlone monity dotyczące kilku opcjonalnych funkcji, takich jak obsługa TypeScript i testowania:

✔ Project name: … <twoja-nazwa-projektu>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<twoja-nazwa-projektu>...
Done.

Jeśli nie jesteś pewien opcji, po prostu wybierz „Nie”, naciskając Enter. Po utworzeniu projektu postępuj zgodnie z instrukcjami, aby zainstalować zależności i uruchomić serwer deweloperski:

$ cd <twoja-nazwa-projektu>
$ npm install
$ npm run dev

$ cd <twoja-nazwa-projektu>
$ pnpm install
$ pnpm run dev

$ cd <twoja-nazwa-projektu>
$ yarn
$ yarn dev

$ cd <twoja-nazwa-projektu>
$ bun install
$ bun run dev

Powinieneś teraz uruchomić swój pierwszy projekt Vue! Zwróć uwagę, że przykładowe komponenty w wygenerowanym projekcie są pisane przy użyciu Composition API i <script setup>, a nie Options API. Oto kilka dodatkowych wskazówek:

• Zalecana konfiguracja IDE to Visual Studio Code + Vue - Oficjalne rozszerzenie. Jeśli używasz innych edytorów, sprawdź sekcję wsparcia IDE.
• Więcej szczegółów na temat narzędzi, w tym integracji z frameworkami zaplecza, omówiono w Tooling Guide.
• Aby dowiedzieć się więcej o podstawowym narzędziu do kompilacji Vite, zapoznaj się z dokumentacją Vite.
• Jeśli zdecydujesz się na użycie TypeScript, zapoznaj się z Przewodnikiem po użyciu TypeScript.

Gdy będziesz gotowy do wysłania aplikacji do produkcji, uruchom następujące polecenie:

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

Spowoduje to utworzenie gotowej do produkcji kompilacji Twojej aplikacji w katalogu ./dist projektu. Zapoznaj się z Production Deployment Guide, aby dowiedzieć się więcej o wysyłaniu aplikacji do produkcji.

Następne kroki >

Korzystanie z Vue z CDN ​

Możesz używać Vue bezpośrednio z CDN za pomocą znacznika script:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Tutaj używamy unpkg, ale możesz również użyć dowolnego CDN, który obsługuje pakiety npm, na przykład jsdelivr lub cdnjs. Oczywiście możesz również pobrać ten plik i obsługiwać go samodzielnie.

Podczas korzystania z Vue z CDN nie ma żadnego „kroku kompilacji”. Dzięki temu konfiguracja jest znacznie prostsza i nadaje się do ulepszania statycznego HTML lub integracji z frameworkiem zaplecza. Nie będziesz jednak mógł użyć składni Single-File Component (SFC).

Korzystanie z kompilacji globalnej ​

Powyższy link ładuje global build Vue, gdzie wszystkie API najwyższego poziomu są eksponowane jako właściwości globalnego obiektu Vue. Oto pełny przykład użycia global build:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Witaj Vue!'
      }
    }
  }).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Korzystanie z modułu ES Build ​

W pozostałej części dokumentacji będziemy głównie używać składni modułów ES. Większość nowoczesnych przeglądarek obsługuje teraz natywnie moduły ES, więc możemy używać Vue z CDN za pośrednictwem natywnych modułów ES w następujący sposób:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Witaj Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Witaj Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Zwróć uwagę, że używamy <script type="module">, a zaimportowany adres URL CDN wskazuje na kompilację modułów ES Vue.

Włączanie importowania map ​

W powyższym przykładzie importujemy z pełnego adresu URL CDN, ale w pozostałej części dokumentacji zobaczysz taki kod:

import { createApp } from 'vue'

Możemy nauczyć przeglądarkę, gdzie ma zlokalizować import vue, używając Import Maps:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Witaj Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Witaj Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Możesz również dodać wpisy dla innych zależności do mapy importu - ale upewnij się, że wskazują one na wersję modułów ES biblioteki, której zamierzasz użyć.

Rozdzielanie modułów ​

W miarę jak zagłębiamy się w przewodnik, może zaistnieć potrzeba podzielenia naszego kodu na oddzielne pliki JavaScript, aby łatwiej nimi zarządzać. Na przykład:

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Podliczenie to: {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Podliczenie to: {{ count }}</div>`
}

Jeśli otworzysz powyższy index.html bezpośrednio w swojej przeglądarce, zauważysz, że wyrzuca błąd, ponieważ moduły ES nie mogą działać w protokole file://, który jest protokołem używanym przez przeglądarkę podczas otwierania pliku lokalnego.

Ze względów bezpieczeństwa moduły ES mogą działać tylko w protokole http://, którego używają przeglądarki podczas otwierania stron w sieci. Aby moduły ES działały na naszym komputerze lokalnym, musimy obsługiwać index.html w protokole http://, z lokalnym serwerem HTTP.

Aby uruchomić lokalny serwer HTTP, najpierw upewnij się, że masz zainstalowany Node.js, a następnie uruchom npx serve z wiersza poleceń w tym samym katalogu, w którym znajduje się plik HTML. Możesz również użyć dowolnego innego serwera HTTP, który może obsługiwać pliki statyczne z prawidłowymi typami MIME.

Możesz zauważyć, że szablon importowanego komponentu jest wstawiony jako ciąg JavaScript. Jeśli używasz programu VS Code, możesz zainstalować rozszerzenie es6-string-html i dodać do ciągów prefiks w postaci komentarza /*html*/, aby wyróżnić ich składnię.

Następne kroki ​

Jeżeli pominąłeś Wstęp, gorąco zalecamy jego przeczytanie przed przejściem do dalszej części dokumentacji.