Vue Academy · Pelajaran

Instalasi Vue CLI

Instal dan gunakan Vue CLI untuk membuat proyek baru.

Pelajaran 1 dari 313 langkah

Instalasi Vue CLI adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Apa Itu Vue CLI?

Vue CLI adalah alat baris perintah klasik untuk membuat kerangka dan mengelola proyek Vue.

Membuat proyek dengan bawaan yang wajar
Mengelola konfigurasi pembangunan melalui pengaya
Dibangun di atas webpack

Alat ini menjadi standar selama bertahun-tahun, meskipun Vue modern kini lebih mengutamakan Vite.

Menginstal Vue CLI Secara Global

Instal CLI secara global agar perintah vue tersedia di mana saja.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

Membuat Proyek

Gunakan vue create untuk membuat kerangka proyek baru. Anda memberikan nama proyek.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Memilih Prasetel

CLI meminta Anda memilih prasetel:

Bawaan menyediakan Babel dan ESLint sebagai cara cepat
Pilih fitur secara manual memungkinkan Anda menambahkan Router, Vuex, TypeScript, pengujian, dan lainnya

Prasetel dapat disimpan dan digunakan kembali untuk proyek mendatang.

Memilih Fitur Secara Manual

Saat memilih pilihan manual, Anda mengaktifkan atau menonaktifkan fitur yang diinginkan.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Menjalankan Proyek

Setelah pembuatan selesai, CLI menampilkan perintah untuk memulai aplikasi Anda.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Memperkenalkan Vite

Vite adalah alat pembangunan modern yang dibuat oleh tim Vue.

Menggunakan modul ES asli untuk memulai secara seketika
Penggantian Modul yang sangat cepat saat berjalan
Jauh lebih cepat daripada Vue CLI yang berbasis webpack

Vite kini menjadi alat yang direkomendasikan untuk proyek Vue baru.

Vite vs Vue CLI

Perbandingan kedua alat tersebut:

Vue CLI menggunakan webpack, memiliki awal dingin yang lebih lambat, tetapi matang dan dapat dikonfigurasi
Vite menggunakan esbuild dan ESM asli, memulai hampir seketika, serta menjadi standar ke depannya

Vue CLI kini berada dalam mode pemeliharaan. Pilih Vite kecuali Anda memelihara proyek lama.

npm create vue@latest

Cara resmi untuk memulai proyek Vue baru yang didukung Vite adalah menggunakan alat create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

Menjalankan Proyek create-vue

create-vue menggunakan skrip Vite standar.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

Mana yang Sebaiknya Anda Gunakan?

Panduan untuk memilih:

Memulai proyek baru pada 2024 atau setelahnya? Gunakan npm create vue@latest (Vite)
Memelihara proyek lama yang dibuat dengan Vue CLI? Tetap gunakan Vue CLI
Menginginkan pengalaman pengembangan tercepat? Vite adalah pilihannya

Pemeriksaan Singkat

Uji pemahaman Anda tentang pilihan alat Vue.

Jawab di pelajaran interaktif

Rangkuman: Instalasi Vue CLI

Anda telah mempelajari alat untuk membuat kerangka Vue:

Vue CLI diinstal dengan npm install -g @vue/cli
vue create membuat kerangka dengan prasetel
Vite adalah alternatif modern yang cepat
npm create vue@latest adalah cara modern yang direkomendasikan untuk memulai

Berikutnya: menjelajahi struktur proyek yang dihasilkan.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Instalasi Vue CLI” gratis?

Ya — teks lengkap “Instalasi Vue CLI” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Instalasi Vue CLI”?

Instal dan gunakan Vue CLI untuk membuat proyek baru. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Instalasi Vue CLI” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy