Mulai menggunakan Nuxt.js di Windows

Panduan untuk membantu Anda menginstal kerangka kerja web Nuxt.js dan memulai dan menjalankan di Windows.

Nuxt.js adalah kerangka kerja untuk membuat aplikasi JavaScript yang dirender server berdasarkan Vue.js, Node.js, Webpack, dan Babel.js. Itu terinspirasi oleh Next.js. Ini pada dasarnya adalah boilerplate proyek untuk Vue. Sama seperti Next.js, ini dibuat dengan perhatian pada praktik terbaik dan memungkinkan Anda membuat aplikasi web "universal" dengan cara yang sederhana dan konsisten, dengan hampir tidak ada konfigurasi. Aplikasi web yang dirender server "universal" ini juga kadang-kadang disebut "isomorphic", yang berarti bahwa kode dibagikan antara klien dan server.

Untuk mempelajari selengkapnya tentang Vue, lihat halaman gambaran umum Vue.

Prasyarat

Panduan ini mengasumsikan bahwa Anda telah menyelesaikan langkah-langkah untuk menyiapkan lingkungan pengembangan Node.js Anda, termasuk:

• Instal Subsistem Windows untuk Linux (WSL), termasuk distribusi Linux (seperti Ubuntu) dan pastikan itu berjalan dalam mode WSL 2. Anda dapat memeriksanya dengan membuka PowerShell dan memasukkan: wsl -l -v
• Instal Node.js di WSL 2: Ini termasuk manajer versi, manajer paket, Visual Studio Code, dan ekstensi Pengembangan Jarak Jauh.

Sebaiknya gunakan Subsistem Windows untuk Linux saat bekerja dengan aplikasi NodeJS untuk kecepatan performa yang lebih baik, kompatibilitas panggilan sistem, dan untuk patodi saat menjalankan server Linux atau kontainer Docker.

Penting

Menginstal distribusi Linux dengan WSL akan membuat direktori untuk menyimpan file: \\wsl\Ubuntu-20.04 (mengganti Ubuntu-20.04 dengan distribusi Linux apa pun yang Anda gunakan). Untuk membuka direktori ini di Windows File Explorer, buka baris perintah WSL Anda, pilih direktori beranda Anda menggunakan cd ~, lalu masukkan perintah explorer.exe . Hati-hati untuk tidak menginstal NodeJS atau menyimpan file yang akan Anda kerjakan pada drive C yang dipasang (/mnt/c/Users/yourname$). Melakukannya akan memperlambat waktu penginstalan dan build Anda secara signifikan.

Menginstal Nuxt.js

Untuk menginstal Nuxt.js, Anda harus menjawab serangkaian pertanyaan tentang kerangka kerja sisi server terintegrasi, kerangka kerja UI, kerangka kerja pengujian, mode, modul, dan linter yang ingin Anda instal:

1. Buka baris perintah WSL (yaitu. Ubuntu).

2. Buat folder proyek baru: mkdir NuxtProjects dan masukkan direktori tersebut: cd NuxtProjects.

3. Instal Nuxt.js dan buat proyek (ganti 'my-nuxt-app' dengan apa pun yang ingin Anda panggil aplikasi Anda): npm create nuxt-app my-nuxt-app

4. Penginstal Nuxt.js sekarang akan mengajukan pertanyaan berikut:

   • Nama Proyek: my-nuxtjs-app
   • Deskripsi proyek: Deskripsi aplikasi Nuxt.js saya.
   • Nama pembuat: Saya menggunakan alias GitHub saya.
   • Pilih manajer paket: Yarn atau Npm - kami menggunakan NPM untuk contoh kami.
   • Pilih kerangka kerja UI: None, Ant Design Vue, Bootstrap Vue, dll. Mari kita pilih Vuetify untuk contoh ini, tetapi Komunitas Vue membuat ringkasan yang bagus membandingkan kerangka kerja UI ini untuk membantu Anda memilih yang paling cocok untuk proyek Anda.
   • Pilih kerangka kerja server kustom: None, AdonisJs, Express, Fastify, dll. Mari kita pilih Tidak Ada untuk contoh ini, tetapi Anda dapat menemukan perbandingan kerangka kerja server 2019-2020 di situs Dev.to.
   • Pilih modul Nuxt.js (gunakan spacebar untuk memilih modul atau cukup masukkan jika Anda tidak menginginkannya): Axios (untuk menyederhanakan permintaan HTTP) atau dukungan PWA (untuk menambahkan pekerja layanan, file manifest.json, dll). Jangan tambahkan modul untuk contoh ini.
   • Pilih alat linting: file bertahap ESLint, Prettier, Lint. Mari kita pilih ESLint (alat untuk menganalisis kode Anda dan memperingatkan Anda tentang potensi kesalahan).
   • Pilih kerangka kerja pengujian: Tidak ada, Jest, AVA. Mari kita pilih Tidak Ada karena kita tidak akan membahas pengujian dalam mulai cepat ini.
   • Pilih mode penyajian: Universal (SSR) atau Aplikasi Halaman Tunggal (SPA). Mari kita pilih Universal (SSR) untuk contoh kita, tetapi dokumen Nuxt.js menunjukkan beberapa perbedaan -- SSR yang memerlukan server Node.js yang berjalan ke server-render aplikasi dan SPA Anda untuk hosting statis.
   • Pilih alat pengembangan: jsconfig.json (disarankan untuk Visual Studio Code sehingga penyelesaian kode Intellisense berfungsi)

5. Setelah proyek Anda dibuat, cd my-nuxtjs-app untuk memasukkan direktori proyek Nuxt.js Anda, lalu masukkan code . untuk membuka proyek di lingkungan VS Code WSL-Remote.

   

6. Ada 3 perintah yang perlu Anda ketahui setelah Nuxt.js diinstal:

   • npm run dev untuk menjalankan instans pengembangan dengan hot-reloading, pengamatan file, dan tugas berjalan kembali.
   • npm run build untuk mengkompilasi proyek Anda.
   • npm start untuk memulai aplikasi Anda dalam mode produksi.

   Buka terminal WSL yang terintegrasi dalam Visual Studio Code (Lihat > Terminal). Pastikan bahwa jalur terminal diarahkan ke direktori proyek Anda (yaitu). ~/NuxtProjects/my-nuxt-app$ Kemudian coba jalankan instans pengembangan aplikasi Nuxt.js baru Anda menggunakan: npm run dev

7. Server pengembangan lokal akan dimulai (menampilkan beberapa jenis bilah kemajuan dingin untuk kompilasi klien dan server). Setelah proyek Anda selesai dibangun, terminal Anda akan menampilkan "Berhasil dikompilasi" bersama dengan berapa banyak waktu yang diperlukan untuk dikompilasi. Arahkan browser web Anda ke untuk http://localhost:3000 membuka aplikasi Nuxt.js baru Anda.

   

8. pages/index.vue Buka file di editor Visual Studio Code Anda. Temukan judul <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> halaman dan ubah menjadi <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>. Dengan browser web Anda masih terbuka untuk localhost:3000, simpan perubahan Anda dan perhatikan fitur hot-reloading secara otomatis mengkompilasi dan memperbarui perubahan Anda di browser.

9. Mari kita lihat bagaimana Nuxt.js menangani kesalahan. </v-card-title> Hapus tag penutup sehingga kode judul Anda sekarang terlihat seperti ini: <v-card-title class="headline">This is my new Nuxt.js app!. Simpan perubahan ini dan perhatikan bahwa kesalahan kompilasi akan ditampilkan di browser Anda, dan di terminal Anda, memberi tahu Anda bahwa tag penutup untuk <v-card-title> hilang, bersama dengan nomor baris tempat kesalahan dapat ditemukan dalam kode Anda. </v-card-title> Ganti tag penutup, simpan, dan halaman akan dimuat ulang.

Anda dapat menggunakan debugger Visual Studio Code dengan aplikasi Nuxt.js Anda dengan memilih kunci F5, atau dengan masuk ke Lihat Debug (Ctrl+Shift+D) dan Lihat > Konsol Debug (Ctrl+Shift+Y) > di bilah menu. Jika Anda memilih ikon gerigi di jendela Debug, file konfigurasi peluncuran (launch.json) akan dibuat bagi Anda untuk menyimpan detail penyiapan penelusuran kesalahan. Untuk mempelajari selengkapnya, lihat Penelusuran Kesalahan Visual Studio Code.

Untuk mempelajari selengkapnya tentang Nuxt.js, lihat panduan Nuxt.js.