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:
{
"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:
<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:
cd <project-name>
yarn dev
cd <project-name>
npm run dev
Aplikasi sekarang berjalan di http://localhost:3000. Bagus!
Kontributor
Jumpa kesalahan atau ingin berkontribusi pada dokumentasi ini? Sunting halaman ini di GitHub!