Instalasi

Vue.js secara desain dibangun untuk dapat diadopsi secara bertahap. Hal tersebut berarti Vue dapat diintegrasi menjadi sebuah proyek dengan banyak cara tergantung dari persyaratannya.

Ada tiga cara utama untuk menambahkan Vue.js ke dalam suatu proyek:

1. Mengimpor Vue sebagai paket CDN di dalam halaman
2. Download berkas JavaScript dan host sendiri
3. Memasang Vue menggunakan npm
4. Menggunakan Antarmuka Perintah Sebaris untuk membangun proyek, yang menyediakan susunan lengkap untuk alur kerja frontend modern (contohnya: hot-reload, lint-saat-disimpan, dan masih banyak lagi)

Catatan Rilis

Versi terakhir:

Catatan rilis yang detail untuk setiap versi terdapat pada GitHub (opens new window).

Vue Devtools

Saat ini pada tahap Beta - Integrasi VueX dan Router masih dalam proses pengerjaan

Ketika menggunakan Vue, kami merekomendasikan juga untuk memasang Vue Devtools (opens new window) pada peramban Anda, yang memungkinkan Anda untuk menginspeksi dan mendebug aplikasi Vue dengan antarmuka yang lebih ramah pengguna.

Dapatkan Ekstensi Chrome (opens new window)

Dapatkan Addon Firefox (opens new window)

Dapatkan Aplikasi Elektron (opens new window)

CDN

Untuk tujuan pembuatan prototipe atau pembelajaran, Anda dapat menggunakan versi terakhir dengan:

<script src="https://unpkg.com/vue@next"></script>

Untuk produksi, kami merekomendasikan untuk menggunakan versi angka spesifik dan build tertentu untuk mencegah kerusakan pada versi terbaru.

Download and Self Host

If you want to avoid using build tools but can't use a CDN in production then you can download the relevant .js file and host it using your own web server. You can then include it using a <script> tag, just like with the CDN approach.

The files can be browsed and downloaded from a CDN such as unpkg (opens new window) or jsDelivr (opens new window). The various different files are explained later but you would typically want to download both a development build and a production build.

npm

npm adalah metode pemasangan yang direkomendasikan ketika membangun aplikasi skala besar dengan Vue. npm berpasangan dengan baik dengan bundler modul seperti Webpack (opens new window) atau Rollup (opens new window). Vue juga menyediakan peralatan pendukung untuk membuat Komponen Berkas Tunggal.

# versi stabil terakhir
$ npm install vue@next

CLI

Vue menyediakan Antarmuka Perintah Sebaris (CLI) Resmi (opens new window) untuk perancah cepat Aplikasi Laman Tunggal (Single Page Applications). Vue CLI menyediakan alur kerja frontend modern yang lengkap. Hanya membutuhkan beberapa menit untuk bangun dan berjalan dengan hot-reload, lint-ketika-berkas-disimpan, build siap-produksi. Lihat dokumentasi Vue CLI (opens new window) untuk lebih detail.

TIP

CLI mengasumsikan pengetahuan sebelumnya tentang Node.js dan alat pembangun terkait. Jika Anda baru dalam Vue atau perangkat pembangun front-end, kami sangat menyarankan pergi ke petunjuk tanpa perangkat pembangun apapun sebelum menggunakan CLI.

Untuk Vue 3, Anda harus menggunakan Vue CLI v4.5 yang tersedia di npm sebagai @vue/cli. Untuk memutakhirkan, Anda perlu memasang ulang versi terakhir dari @vue/cli secara global:

yarn global add @vue/cli
# Atau
npm install -g @vue/cli

Kemudian di proyek Vue, jalankan

vue upgrade --next

Vite

Vite (opens new window) adalah perangkat pembangunan web yang memungkinkan menyediakan kode secara cepat karena pendekatan modul ES asli.

Proyek Vue dapat diatur secara cepat dengan Vite dengan menjalankan perintah berikut di terminal Anda.

Dengan npm:

$ npm init @vitejs/app <nama-proyek>
$ cd <nama-proyek>
$ npm install
$ npm run dev

Atau dengan Yarn:

$ yarn create @vitejs/app <nama-proyek>
$ cd <nama-proyek>
$ yarn
$ yarn dev

Mungkin terjadi, ketika nama pengguna Anda memiliki spasi di dalamnya seperti 'Mike Baker' yang Vite tidak dapat lakukan. Coba lakukan dengan cara

$ create-vite-app <nama-proyek>

Penjelasan dari Berbagai Build

Di dalam direktori dist/ dari paket npm (opens new window), Anda dapat menemukan beberapa build berbeda dari Vue.js. Berikut gambaran berkas dist yang mana yang harus digunakan berdasarkan studi kasus yang Anda miliki.

Dari CDN atau tanpa Bundler

vue(.runtime).global(.prod).js:

• Untuk akses secara langsung melalui <script src="..."> di peramban (browser), menyediakan Vue secara global.
• Kompilasi templat di-peramban:
  • vue.global.js adalah build "penuh" yang menyertakan kompilator dan runtime secara bersamaan sehingga mendukung kompilasi templat secara langsung.
  • vue.runtime.global.js hanya berisi runtime dan membutuhkan templat untuk pra-terkompilasi selama tahap build.
• Menyatukan semua paket internal inti Vue - sebagai contoh: berkas tunggal tanpa dependensi apapun dengan berkas lain. Hal tersebut berarti Anda harus mengimpor semua hal dari berkas ini dan berkas ini hanya memastikan Anda mendapatkan instance kode yang sama.
• Berisi berkas lingkungan prod/dev yang hard-coded, dan build produksi terminifikasi. Gunakan berkas *.prod.js untuk tujuan produksi.

Catatan

Build global bukanlah build UMD (opens new window). Mereka di-build sebagai IIFEs (opens new window) dan hanya dimaksudkan untuk digunakan secara langsung melalui <script src="...">.

vue(.runtime).esm-browser(.prod).js:

• Untuk digunakan melalui impor modul ES asli (di peramban (browser) melalui <script type="module">).
• Memiliki kompilasi runtime, dependensi yang disatukan dan perilaku prod/dev yang sama seperti build global.

Dengan Bundler

vue(.runtime).esm-bundler.js:

• Untuk penggunaan dengan bundlers seperti webpack, rollup dan parcel.
• Meninggalkan bagian prod/dev dengan process.env.NODE_ENV guards (harus diganti oleh bundler)
• Tidak menyediakan versi build yang terminifikasi (akan dilakukan bersama bagian kode lainnya setelah proses bundling).
• Mengimpor dependensi (seperti @vue/runtime-core, @vue/runtime-compiler)
  • Dependensi yang terimpor juga build versi esm-buindler dan akan mengimpor dependensi mereka sendiri (seperti @vue/runtime-core mengimpor @vue/reactivity)
  • Hal tersebut berarti Anda dapat memasang/mengimpor dependensi tersebut sendiri-sendiri tanpa menghasilkan instances yang berbeda dari dependensi ini, tetapi Anda harus meyakinkan mereka mengacu pada versi yang sama.
• Kompilasi templat di peramban (browser):
  • vue.runtime.esm-bundler.js (bawaan) hanyalah runtime, dan membutuhkan semua templat untuk terkompilasi dahulu. Berkas ini merupakan entri bawaan untuk bundlers (melalui bagian modul di berkas package.json) karena ketika menggunakan bundler templat pada umumnya terkompilasi dahulu (seperti pada berkas *.vue).
  • vue.esm-bundler.js: menyertakan kompilator runtime. Gunakan berkas ini jika Anda menggunakan bundler tetapi ingin proses kompilasi templat saat runtime (seperti templat di dalam DOM atau templat melalui string JavaScript). Anda perlu mengatur bundler Anda untuk mengalias vue ke berkas ini.

Untuk Server-side Rendering

vue.cjs(.prod).js:

• Untuk digunakan pada server-side rendering Node.js melalui require().
• Jika Anda mem-bundle aplikasi Anda menggunakan webpack dengan target: 'node' dan dengan benar tidak menyertakan vue, berkas ini merupakan build yang akan termuat.
• Berkas dev/prod ter-build terlebih dahulu, tetapi berkas yang sesuai akan secara otomatis diimpor berdasarkan process.env.NODE_ENV.

Runtime + Kompilator vs. Hanya-runtime

Jika Anda perlu untuk mengompilasi templat di klien (seperti melewatkan string di opsi templat, atau mounting ke elemen menggunakan HTML di-dalam-DOM sebagai templat), Anda akan memerlukan kompilator dan juga bild versi penuh:

// Kode ini membutuhkan kompilator (_compiler_)
Vue.createApp({
  template: '<div>{{ halo }}</div>'
})

// Kode ini tidak
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.halo)
  }
})

Ketika menggunakan vue-loader, templat di dalam berkas *.vue terkompilasi terlebih dahulu menjadi JavaScript ketika proses build. Anda tidak membutuhkan kompilator pada bundle akhir, dan oleh karena itu dapat menggunakan build versi runtime saja.