Instalasi

Persyaratan

Di sini, Anda akan menemukan informasi tentang menyiapkan dan menjalankan proyek Nuxt.js dalam 4 langkah.

Cara lain untuk memulai dengan Nuxt.js adalah dengan menggunakan CodeSandbox yang merupakan cara terbaik untuk bermain-main dengan cepat dengan Nuxt.js dan / atau berbagi kode Anda dengan orang lain.

Node

node - setidaknya v8.9.0

Kami menyarankan Anda menginstal versi terbaru.

Text editor

Gunakan apa pun yang Anda suka, tetapi kami menyarankan VSCode.

Terminal

Gunakan apa pun yang Anda suka, tetapi kami merekomendasikan menggunakan integrated terminal VSCode.

Mulai dari awal

Membuat proyek Nuxt.js dari awal hanya membutuhkan satu file dan satu direktori.

Dalam contoh khusus ini, kita akan menggunakan terminal untuk membuat direktori dan file, tetapi jangan ragu untuk membuatnya menggunakan editor pilihan Anda.

Siapkan proyek Anda

Untuk memulai, buat direktori kosong dengan nama proyek Anda dan navigasikan ke dalamnya:

mkdir <project-name>
cd <project-name>

Ganti <project-name> dengan nama proyek Anda._

Kemudian buat file bernama package.json:

touch package.json

Buka file package.json di editor kode favorit Anda dan isi dengan konten JSON ini:

package.json

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

scripts tentukan perintah Nuxt.js yang akan diluncurkan dengan perintah npm run <command>.

Apa itu file package.json?

Ini package.json seperti kartu ID proyek Anda. Jika Anda tidak tahu apa package.json file tersebut, kami sangat menyarankan Anda untuk membaca sekilas dokumentasi npm.

Install nuxt

Setelah package.json dibuat, tambahkan nuxt ke proyek Anda melalui npm atau yarn seperti dibawah ini:

yarn add nuxt

npm install nuxt

Perintah ini akan ditambahkan nuxt sebagai dependency pada proyek Anda dan akan ditambahkan ke package.json Anda secara otomatis. Direktori node_modules juga akan dibuat yang mana semua paket yang terinstal dan dependensi mereka disimpan.

File yarn.lock atau package-lock.json juga dibuat untuk memastikan penginstalan yang konsisten dan dependensi yang kompatibel dari paket yang diinstal di proyek Anda.

Buat halaman pertama Anda

Nuxt.js mengubah setiap *.vue file di dalam direktori pages sebagai rute untuk aplikasi.

Buat direktori pages di proyek Anda:

mkdir pages

Lalu buat file index.vue di dalam direktori pages:

touch pages/index.vue

Halaman ini penting untuk dipanggil index.vue karena ini akan menjadi halaman default yang ditampilkan Nuxt saat aplikasi dijalankan. Ini adalah beranda dan harus disebut index.

Buka file index.vue di editor Anda dan tambahkan konten berikut:

pages/index.vue

<template>
  <h1>Hello world!</h1>
</template>

Memulai proyeknya

Jalankan proyek Anda dengan mengetik salah satu dari perintah berikut di bawah ini di terminal Anda:

yarn dev

npm run dev

Kita gunakan perintah dev ketika menjalankan aplikasi dalam mode pengembangan.

Aplikasi sekarang berjalan di http://localhost:3000.

Buka di browser Anda dengan mengklik link di terminal Anda dan Anda akan melihat teks "Hello World" yang kita salin di langkah sebelumnya.

Saat meluncurkan Nuxt.js dalam mode pengembangan, ia akan mendengarkan perubahan file di sebagian besar direktori, jadi tidak perlu memulai ulang aplikasi saat misalnya menambahkan halaman baru.

Saat Anda menjalankan perintah dev, folder .nuxt akan dibuat. Folder ini harus diabaikan dari kontrol versi. Anda dapat mengabaikan file dengan membuat file .gitignore di tingkat root dan menambahkan .nuxt.

Langkah Bonus

Buat halaman bernama fun.vue di dalam direktori pages.

Tambahkan <template></template> dan sertakan judul dengan kalimat lucu di dalamnya.

Kemudian, buka browser Anda dan lihat halaman baru Anda di http://localhost:3000/fun.

Buat nama direktori more-fun dan letakan file index.vue di dalamnya. Ini akan memberikan hasil yang sama seperti membuat file more-fun.vue.

Menggunakan create-nuxt-app

Untuk memulai dengan cepat, Anda dapat menggunakan aplikasi create-nuxt-app.

Pastikan Anda telah menginstal npx (npx tersedia secara default sejak npm 5.2.0) atau npm v6.1 atau yarn.

yarn create nuxt-app <project-name>

npx create-nuxt-app <project-name>

npm init nuxt-app <project-name>

Ini akan menanyakan beberapa pertanyaan (nama, opsi Nuxt, kerangka UI, TypeScript, linter, kerangka pengujian, dll.), Ketika dijawab, itu akan menginstal semua dependensi. Langkah selanjutnya adalah menavigasi ke folder proyek dan meluncurkannya: