Dalam artikel ini, Anda akan mempelajari cara membuat situs web Vue yang akan menampilkan acara yang diselenggarakan oleh suatu organisasi. Pengguna akan masuk untuk melihat laman detail acara, jadi Anda juga akan menambahkan autentikasi ke situs web. Anda akan mempelajari beberapa latar belakang Vue, struktur aplikasi Vue, membuat komponen, mengatur perutean, dan menata gaya dengan Bulma
Anda dapat menemukan kode terakhir di repositori GitHub ini jika Anda ingin melihat hasil akhirnya sekarang
❗ Jika Anda sudah memiliki aplikasi Vue dan hanya ingin menambahkan autentikasi, untuk mempelajari caranya
⚡️ Ini adalah tutorial dua bagian. Bagian satu tidak mencakup otorisasi. Anda akan mengatur tahapan untuk bagian kedua dengan membangun situs web dan mengintegrasikan login pengguna. Kemudian di bagian kedua, Anda akan mempelajari cara hanya menampilkan data tertentu jika pengguna masuk dan telah diberi otorisasi untuk mengakses data tersebut
Persyaratan
Aplikasi ini menggunakan versi terbaru (pada saat penulisan — 8/8/2020) berikut ini
- Melihat. js (? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier_7)
- Node. js (? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier_8)
Catatan. Tutorial ini menggunakan Vue 2. Rilis untuk Vue 3 dijadwalkan untuk kuartal ketiga tahun 2020, tetapi itu tidak berarti Anda tidak boleh memulai dengan Vue 2. Tutorial ini meletakkan dasar-dasar Vue yang akan dibawa ke rilis berikutnya juga
Anda dapat mengunduh Node. js di sini, yang secara otomatis menginstal npm, manajer paket Node, juga
Npm memungkinkan Anda menginstal jutaan pustaka dengan cepat dan dengan mudah mengelola semua dependensi yang Anda miliki di aplikasi Anda. Anda akan melihat betapa bermanfaatnya ini segera
Tutorial ini akan memandu Anda melalui cara membuat semuanya dari awal, jadi Anda tidak perlu memiliki pengetahuan sebelumnya tentang Vue atau Node untuk mengikutinya. Namun, Anda memerlukan editor kode (VS Code adalah favorit saya) dan akses ke terminal untuk mengikuti tutorial ini
Mari kita mulai
Mengapa Belajar Vue?
Vue sejarah dan popularitas
Melihat. js adalah framework JavaScript yang dibuat oleh Evan You yang popularitasnya meledak selama beberapa tahun terakhir
Sumber. 2018 State of JS Survey Minat Vue. js meningkat hampir tiga kali lipat dari 2016 ke 2018 dengan peningkatan pada mereka yang tertarik untuk mempelajarinya dan mereka yang akan menggunakannya lagi
Sumber. Survei JS 2018 Pada tahun 2018, mayoritas orang yang disurvei pernah mendengar tentang Vue. js dan ingin mempelajarinya atau sudah menggunakannya dan akan menggunakannya lagi
Evan You meluncurkan proyek tersebut setelah mengerjakan beberapa proyek AngularJS saat dia bekerja untuk Google. Vue tidak didukung oleh perusahaan besar seperti Google (Angular) atau Facebook (React), tetapi seperti yang Anda lihat pada bagan di atas, Vue masih dapat berdiri sendiri di antara framework JavaScript teratas.
Karena sejarah Evan You di Google, Anda bahkan mungkin melihat beberapa kesamaan antara Vue dan AngularJS (Angular lama)
Saya pikir, bagaimana jika saya bisa mengekstrak bagian yang sangat saya sukai tentang Angular dan membuat sesuatu yang sangat ringan
— Evan You dalam membuat Vue. js
Vue vs. Sudut vs. Reaksi
Salah satu hal terbaik tentang Vue adalah hambatan masuk yang rendah
Sumber. Survei JS 2018 Untuk pengembang yang memilih "akan menggunakan lagi", Vue favorit mereka. Fitur js adalah kurva belajar yang mudah, gaya pemrograman yang elegan, dan dokumentasi yang bagus
Banyak kerangka kerja lain mungkin mengharuskan (atau sangat menyarankan) agar Anda mempelajari sintaksnya sendiri atau mengintegrasikan teknologi lain (mis. g. , TypeScript untuk Angular atau JSX untuk Bereaksi). Tentu saja, tidak ada yang salah dengan hal ini, tetapi ini membuat sedikit lebih sulit bagi seorang pemula untuk memulai ketika mereka harus segera mengetahui semua hal. Vue jika Anda mau, tetapi tidak wajib. Ini bukan untuk mengatakan satu metode lebih baik dari yang lain, tetapi sintaks mirip HTML ini adalah salah satu penjelasan yang mungkin mengapa pengembang menganggap Vue lebih mudah dipelajari pada awalnya.
Sekali lagi, ketika membandingkan kerangka kerja populer, tidak ada yang lebih baik dari yang lain. Pada akhirnya, tergantung pada apa yang Anda rasa paling nyaman digunakan
Vue adalah opsi yang bagus jika Anda ingin menjalankan sesuatu dengan cepat. Ini memiliki dukungan komunitas yang hebat, dokumentasi yang kuat dalam beberapa bahasa, dan menyenangkan untuk digunakan
Pengaturan
Baiklah, mari kita mulai dengan beberapa kode
Pertama, buka terminal Anda dan alihkan ke direktori tempat Anda ingin menyimpan proyek
Anda akan membuat proyek baru ini menggunakan Vue CLI
🛠️️ Alat Vue CLI membantu memulai dan menjalankan Vue dengan cepat dengan memungkinkan Anda memilih dari pengaturan build yang telah dikonfigurasi sebelumnya. Untuk menggunakan CLI, jalankan perintah berikut di terminal Anda
npx @vue/cli create events-appIni membuat folder baru bernama ? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier9 dan memulai proses instalasi di folder itu
Catatan. ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit_0 memungkinkan Anda menggunakan Vue CLI tanpa menginstalnya secara global. Ini tersedia dalam versi npm >= 5. 2. 0
CLI sekarang akan mengajukan beberapa pertanyaan kepada Anda sehingga dapat mengatur aplikasi dengan benar. Opsi yang digunakan tutorial ini tercantum di bawah ini. Tekan ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit_1 untuk memilih
🛠️️ Langkah 1. Pilih preset — ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit2
? Please pick a preset: default (babel, eslint) > Manually select features🛠️️ Langkah 2. Periksa fitur yang diperlukan — ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit_3, ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit4, ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit5, ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit6
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E TestingTekan ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit_7 untuk memilih beberapa fitur dan ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit1 setelah Anda memilih semua fitur
🛠️️ Langkah 3. Mode riwayat — ? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit_9
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) YCatatan. Ini akan menghapus hash default (#) dari URL
🛠️️ Langkah 4. Pra-prosesor CSS — ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json0
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less StylusCatatan. Dart Sass adalah implementasi utama dari Sass
🛠️️ Langkah 5. Pilih linter/formatter —? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json1
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier🛠️️ Langkah 6. Fitur serat tambahan — ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json2
? Pick additional lint features: ◯ Lint on save ❯ ◉ Lint and fix on commit_🛠️️ Langkah 7. Lokasi konfigurasi — ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json_3
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json🛠️️ Langkah 8. Simpan sebagai preset — ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json4
? Save this as a preset for future projects? (y/N) NSekarang CLI akan mengonfigurasi aplikasi Anda. Itu juga akan menginstal dependensi, jadi berikan sedikit waktu (~30 detik)
🛠️️ Setelah selesai, Anda dapat memulai aplikasi dengan menjalankan ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json5 atau ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json6
cd events-app npm run serveLihat aksinya di ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json_7. Lanjutkan dan biarkan ini berjalan di latar belakang sehingga Anda dapat melihat progres aplikasi saat Anda mengikuti tutorial
"Vue CLI membantu Anda bangun dan berjalan dengan Vue. js dalam hitungan detik. "
Tweet Ini
Arsitektur Aplikasi Vue
Sekarang buka proyek Anda di editor kode Anda, dan Anda akan melihat beberapa file default yang dibuat CLI. Mari kita bersihkan ini
🛠️️ Hapus file-file ini
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json8
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json_9
🛠️️ Sekarang buka ? Save this as a preset for future projects? (y/N) N0 dan ganti dengan yang berikut
? Please pick a preset: default (babel, eslint) > Manually select features0Ini akan meninggalkan Anda dengan beranda kosong dan bilah navigasi dengan dua tautan. Rumah dan Tentang
Mari kita lihat sekilas file-file penting yang tersisa sehingga Anda dapat melihat bagaimana mereka bekerja sama
bermain. js
File pertama yang perlu diperhatikan adalah file ________26______1. Ini akan menjadi titik masuk untuk aplikasi Vue Anda
? Please pick a preset: default (babel, eslint) > Manually select features1Anda memiliki impor di bagian atas file
- Vue sendiri
- Komponen ? Save this as a preset for future projects? (y/N) N_2 (yang akan kita bahas sebentar lagi)
- Router (dibuat oleh CLI)
Selanjutnya, Anda memiliki ? Save this as a preset for future projects? (y/N) N_3, yang menyetel aplikasi dalam mode pengembangan
Dan terakhir, Anda membuat instance Vue baru di bagian bawah
Instance Vue diperlukan untuk setiap aplikasi Vue. yang berisi informasi tentang aplikasi Anda, seperti elemen DOM tempat instance Vue akan dipasang, data yang akan digunakan instance, yang berjalan di beberapa titik selama siklus hidup instance, dan banyak lagi
Dalam hal ini, instance Vue menggunakan router, merender aplikasi dengan template ? Save this as a preset for future projects? (y/N) N2 (lebih lanjut tentang ini segera), dan kemudian memasangnya ke elemen DOM dengan ? Save this as a preset for future projects? (y/N) N6 dari ? Save this as a preset for future projects? (y/N) N7
indeks. html
Selanjutnya, buka ? Save this as a preset for future projects? (y/N) N_8, dan Anda akan melihat file HTML ? Save this as a preset for future projects? (y/N) N9 yang cukup standar
? Please pick a preset: default (babel, eslint) > Manually select features2Jika Anda melihat ke bagian bawah file, Anda akan melihat di mana cd events-app npm run serve0 misterius di file ? Save this as a preset for future projects? (y/N) N1 itu berperan. cd events-app npm run serve_2 itu adalah tempat instance Vue akan disuntikkan
Aplikasi. melihat
File penting berikutnya adalah cd events-app npm run serve3. Ini adalah komponen pertama Anda
Anda belum perlu mengetahui semua detail file ini, ketahuilah bahwa ini adalah "blok penyusun" selanjutnya dari aplikasi Vue Anda. Saat Anda meninjau file ? Save this as a preset for future projects? (y/N) N_1, Anda melihatnya sedang mengimpor dan merender template bernama ? Save this as a preset for future projects? (y/N) N2, yang merupakan file ini
Sebelum masuk ke detail file ini, mari kita pelajari terlebih dahulu tentang apa itu komponen dengan meninjau sistem komponen Vue
Menggunakan Komponen di Vue
Konsep komponen secara umum terkadang terlalu rumit, namun kenyataannya cukup sederhana. Komponen adalah blok kode modular dan dapat digunakan kembali. Ini berisi semua HTML, JavaScript, dan CSS yang diperlukan untuk fungsinya
Bayangkan Anda memiliki situs web sederhana yang memiliki dua halaman. halaman rumah dan halaman portofolio
- Beranda — Berisi beberapa gambar, informasi dasar, dan carousel dengan beberapa testimonial
- Halaman portofolio — Berisi beberapa gambar dan deskripsi karya Anda
Anda memutuskan bahwa Anda ingin halaman Portofolio Anda menyertakan semua testimonial yang ada di beranda Anda juga
Dalam skenario ini, Anda dapat menyalin/menempelkan semua kode yang diperlukan untuk testimonial ke kedua halaman, tetapi Anda akan melanggar aturan KERING emas ("Jangan Ulangi Diri Sendiri")
Di sinilah ide komponen mulai masuk akal. Alih-alih membuat kode duplikat, Anda dapat mengeluarkan kode testimonial itu dan mengemasnya ke dalam file tersendiri. Potongan kode mandiri ini akan berisi HTML, gaya, dan JS apa pun yang diperlukan untuk membuat carousel berfungsi
Sekarang, kapan pun Anda ingin memasukkan "komponen" testimonial itu di suatu tempat, yang harus Anda lakukan hanyalah mengimpor komponen itu
Aplikasi Anda akan mulai mengambil semacam struktur pohon. Anda akan memiliki komponen "root", yang dalam hal ini adalah cd events-app npm run serve3, dan komponen itu akan mengimpor komponen lain. Semua potongan kecil kode ini bersatu untuk membangun aplikasi Anda
Sumber.
Sekarang setelah Anda memiliki ide tentang komponen, mari kita lihat seperti apa komponen Vue
komponen Vue
Ada banyak cara untuk menyusun komponen di Vue. Mari kita lihat cara yang paling populer. Komponen file tunggal
Komponen file tunggal mengemas template, logika, dan gaya yang digunakan oleh komponen ke dalam satu file dengan ekstensi cd events-app npm run serve7. Metode ini memerlukan penyiapan build, yang telah disiapkan CLI untuk Anda. Mari kita lihat contoh komponen
? Please pick a preset: default (babel, eslint) > Manually select features3HTML terlampir dalam tag ________29______8. Di dalam, Anda akan melihat cd events-app npm run serve_9. Ini adalah contoh bagaimana Anda dapat menggunakan komponen lain di dalam komponen ini
Catatan. Anda harus selalu memiliki elemen induk ? Please pick a preset: default (babel, eslint) > Manually select features_00 yang menyertakan sisa HTML setelah tag template
Selanjutnya, ada tag ? Please pick a preset: default (babel, eslint) > Manually select features_01, yang meliputi
- Pernyataan ? Please pick a preset: default (babel, eslint) > Manually select features_02 yang memungkinkan Anda mengimpor dan menggunakan komponen lain di dalam komponen ini
- Objek ? Please pick a preset: default (babel, eslint) > Manually select features_03 yang memungkinkan Anda menentukan dan mengekspor komponen bernama ini untuk digunakan kembali di seluruh aplikasi Anda
- Objek ? Please pick a preset: default (babel, eslint) > Manually select features_04 di dalam ekspor tempat Anda dapat membuat daftar semua komponen anak yang digunakan dalam komponen ini
Catatan. Ini adalah contoh yang cukup mendasar, tetapi ada banyak opsi komponen lain yang dapat Anda sertakan dalam objek komponen Anda
Selanjutnya, ada tag ? Please pick a preset: default (babel, eslint) > Manually select features_05. Gaya yang ditentukan di sini berlaku untuk komponen ini dan semua turunannya. Namun, dalam kasus ini, ada properti ? Please pick a preset: default (babel, eslint) > Manually select features_06 yang ditambahkan, yang membatasi gaya ini hanya untuk komponen ini. Dan terakhir, Anda juga menentukan bahwa Anda menggunakan SCSS sebagai bahasa stylesheet
Mari kita lihat file ? Please pick a preset: default (babel, eslint) > Manually select features_07 itu lagi sekarang karena Anda memiliki sedikit latar belakang tentang struktur komponen
Aplikasi. melihat
Buka cd events-app npm run serve3
? Please pick a preset: default (babel, eslint) > Manually select features4Ini adalah template tampilan pertama yang dirender di aplikasi Anda. Komponen lainnya akan dimulai dari sini
Lihatlah ? Please pick a preset: default (babel, eslint) > Manually select features09 dan ? Please pick a preset: default (babel, eslint) > Manually select features10. Ini adalah bagaimana aplikasi Anda akan menangani perutean. Jika Anda memilih untuk memiliki router built-in menggunakan CLI, Anda sudah memiliki template yang bagus untuk digunakan
Kami akan segera membahas lebih dalam tentang perutean, tetapi ketahuilah bahwa saat Anda mengeklik salah satu tautan tersebut, templat yang sama ini akan tetap dirender, tetapi ? Please pick a preset: default (babel, eslint) > Manually select features11 akan diganti dengan rute apa pun yang aktif. Dalam hal ini, komponen ? Please pick a preset: default (babel, eslint) > Manually select features_12 atau ? Please pick a preset: default (babel, eslint) > Manually select features13. Ini adalah bagaimana Anda dapat menggunakan kembali tata letak dan navbar yang sama ini di seluruh aplikasi
Coba klik tautan tersebut untuk melihatnya sendiri
Membangun Komponen Aplikasi
Sekarang setelah Anda mengetahui anatomi aplikasi Vue dan cara membuat komponen, saatnya untuk mulai membuat
🛠️️ Pastikan Anda masih berada di folder ? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier9 di terminal lalu buat file/folder ini
? Please pick a preset: default (babel, eslint) > Manually select features5Catatan. Jika Anda menggunakan Windows, perintah ? Please pick a preset: default (babel, eslint) > Manually select features15 mungkin tidak berfungsi, tergantung pada pengaturan Anda. Anda selalu dapat membuat file secara manual
🛠️️ Sekarang buat komponen yang akan dibagikan di antara halaman-halaman ini
? Please pick a preset: default (babel, eslint) > Manually select features6Itu harus dilakukan untuk saat ini. Mari kita mulai mengisi file-file ini dan membahas tujuan dari setiap file
Menggunakan Bulma untuk Styling
Untuk membuat penataan sedikit lebih mudah, Anda akan menggunakan Bulma, yang merupakan framework CSS sumber terbuka
🛠️️ Beralih ke folder ? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier9 lalu masukkan perintah di bawah ini untuk menginstal Bulma
? Please pick a preset: default (babel, eslint) > Manually select features7🛠️️ Sekarang buka ? Save this as a preset for future projects? (y/N) N1 di editor Anda dan impor Bulma dengan menambahkan ini ke bagian atas file setelah semua impor lainnya
? Please pick a preset: default (babel, eslint) > Manually select features_8🛠️️ Mulai aplikasi sekali lagi sehingga Anda dapat melihat pekerjaan Anda sedang berlangsung saat Anda terus membangun di bagian selanjutnya
? Please pick a preset: default (babel, eslint) > Manually select features_9Anda dapat membiarkannya berjalan di latar belakang selama sisa tutorial ini, dan Anda akan selalu dapat melihatnya di browser di ? Please pick a preset: default (babel, eslint) > Manually select features18
Komponen Rumah
Sekarang mari mulai mengerjakan komponen
🛠️️ Buka Komponen Rumah di ? Save this as a preset for future projects? (y/N) N0 dan rekatkan di bawah ini
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_0Ini akan memberi Anda spanduk dan tombol besar di bagian atas halaman. Tombol tersebut akan mengarah ke formulir pendaftaran, yang akan Anda kirim nanti
Tentang Komponen
Komponen ? Please pick a preset: default (babel, eslint) > Manually select features_13 hadir secara default dengan instalasi Vue, tetapi mari kita sedikit merapikannya
🛠️️ Buka ? Please pick a preset: default (babel, eslint) > Manually select features_21, dan ganti semuanya dengan ini
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_1Komponen Nav
🛠️️ Sekarang perbaiki nav. Buka ? Please pick a preset: default (babel, eslint) > Manually select features_22 dan rekatkan ini
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_2Jika Anda menyegarkan, Anda akan melihat nav tidak berubah. Itu karena Anda sebenarnya tidak menggunakan komponen ini di mana pun
🛠️️ Buka ________29______3 dan ganti dengan ini
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_3Karena Anda mendefinisikan tautan router di komponen ? Please pick a preset: default (babel, eslint) > Manually select features24 sekarang, Anda dapat membuangnya di file ini. Yang perlu Anda lakukan hanyalah mengimpor komponen ? Please pick a preset: default (babel, eslint) > Manually select features_24. Gaya ? Please pick a preset: default (babel, eslint) > Manually select features_26 lama juga telah dihapus karena komponen ? Please pick a preset: default (babel, eslint) > Manually select features24 memiliki gayanya sendiri
Sekarang, jika Anda menyegarkan, Anda akan melihat nav baru Anda. Anda bahkan dapat mengeklik, dan itu akan membuka rute berbeda yang telah Anda tentukan di komponen ? Please pick a preset: default (babel, eslint) > Manually select features24
Selanjutnya, Anda akan menambahkan komponen ke halaman ? Please pick a preset: default (babel, eslint) > Manually select features12 Anda
Komponen DaftarAcara
🛠️️ Buka ? Please pick a preset: default (babel, eslint) > Manually select features30 dan rekatkan ini
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_4Ini akan membuat blok kartu yang menempati 1/4 baris (dengan menggunakan ? Please pick a preset: default (babel, eslint) > Manually select features31 Bulma dengan ? Please pick a preset: default (babel, eslint) > Manually select features32). Masing-masing dari 1/4 slot tersebut akan diisi dengan komponen ? Please pick a preset: default (babel, eslint) > Manually select features33
🛠️️ Untuk saat ini, cukup ulangi kode kartu tersebut beberapa kali agar Anda dapat melihat bagaimana strukturnya nantinya
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_5Selanjutnya Anda perlu
- Impor ini ke dalam komponen ? Please pick a preset: default (babel, eslint) > Manually select features_12
- Tambahkan ke daftar komponen yang digunakan ? Please pick a preset: default (babel, eslint) > Manually select features_12 di ? Please pick a preset: default (babel, eslint) > Manually select features36
- Masukkan ke tempat yang sesuai di ? Please pick a preset: default (babel, eslint) > Manually select features12 template
🛠️️ Buka ? Save this as a preset for future projects? (y/N) N0 dan ganti bagian ? Please pick a preset: default (babel, eslint) > Manually select features01 dengan ini
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_6🛠️️ Sekarang di bagian template, panggil komponen dengan ? Please pick a preset: default (babel, eslint) > Manually select features40
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_7Anda sekarang akan melihat teks subtitel, "Lihat acara kami yang akan datang", ditampilkan di bawah spanduk beranda. Namun, belum ada satu pun kartu yang ditampilkan. Itu karena Anda belum membuatnya
Komponen Kartu Acara
🛠️️ Buka ? Please pick a preset: default (babel, eslint) > Manually select features41 dan rekatkan
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_8Anda sekarang akan melihat dua kartu diisi dengan beberapa konten tiruan
Tentu saja, Anda ingin setiap kartu menjadi unik dan mewakili peristiwa yang sebenarnya. Anda akan segera kembali ke komponen ini untuk melihat bagaimana Anda dapat memasukkan data dan menyelesaikannya
Untuk saat ini, selesaikan penyiapan komponen Anda yang lain
Komponen Tunggal Peristiwa
🛠️️ Buka ? Please pick a preset: default (babel, eslint) > Manually select features42 dan rekatkan ini
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_9Ini akan menjadi halaman yang muncul saat pengguna mengklik acara dari daftar di beranda. Karena halaman ini sebenarnya belum ada, inilah saat yang tepat untuk mengunjungi kembali router Anda
Jalur router
🛠️️ Buka ? Please pick a preset: default (babel, eslint) > Manually select features43 dan ganti isinya dengan ini
Tekan simpan dan arahkan ke ? Please pick a preset: default (babel, eslint) > Manually select features_44. Anda sekarang akan melihat isi dari komponen ? Please pick a preset: default (babel, eslint) > Manually select features45
Jika Anda melihat di bawah ? Please pick a preset: default (babel, eslint) > Manually select features46 di router, Anda akan melihat parameter rute, ? Please pick a preset: default (babel, eslint) > Manually select features47. Ini adalah bagaimana Anda akan membuat halaman terpisah untuk setiap acara. Setelah Anda menambahkan data, Anda dapat menavigasi ke acara apa pun dengan menambahkan ? Save this as a preset for future projects? (y/N) N6 ke akhir ? Please pick a preset: default (babel, eslint) > Manually select features49
Mari bekerja menambahkan data sekarang
Menambahkan Data ke Aplikasi Vue Anda
Agar tutorial ini tetap fokus pada dasar-dasar Vue, Anda hanya akan membuat larik objek (di mana setiap objek adalah peristiwa) dan menyimpannya di dalam komponen yang membutuhkannya.
Idealnya, Anda ingin menarik data dari API untuk mengisi blok kartu secara dinamis, tetapi itu sedikit di luar cakupan tutorial ini. Jika Anda tertarik untuk melakukan panggilan ke API menggunakan Vue dan mengamankan data apa pun yang Anda miliki, pastikan Anda membaca bagian 2 dari tutorial ini di mana Anda akan melakukannya
Mari tinjau kembali tiga komponen yang tidak memiliki data dinamis dan lihat cara mengisinya
Komponen DaftarAcara
🛠️️ Kembali ke komponen ? Please pick a preset: default (babel, eslint) > Manually select features50 di ? Please pick a preset: default (babel, eslint) > Manually select features30 dan gulir ke bawah di mana tag ? Please pick a preset: default (babel, eslint) > Manually select features52 dimulai. Ganti keseluruhan ? Please pick a preset: default (babel, eslint) > Manually select features_53 dengan ini
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_1Satu-satunya hal yang berubah di sini adalah penambahan fungsi ? Please pick a preset: default (babel, eslint) > Manually select features54 yang mengembalikan objek kosong bernama ? Please pick a preset: default (babel, eslint) > Manually select features55 dan array bernama ? Please pick a preset: default (babel, eslint) > Manually select features56
- Larik ? Please pick a preset: default (babel, eslint) > Manually select features_56 menampung 2 objek yang masing-masing sesuai dengan peristiwa yang berbeda
- Objek ? Please pick a preset: default (babel, eslint) > Manually select features_55 akan mengadakan satu peristiwa untuk diteruskan ke komponen anak, ? Please pick a preset: default (babel, eslint) > Manually select features33
Selanjutnya, Anda perlu memodifikasi bagian HTML dari file ini untuk mengulangi peristiwa ini dan kemudian mengirim masing-masing ke rantai untuk dirender oleh komponen anak, ? Please pick a preset: default (babel, eslint) > Manually select features33
🛠️️ Ganti semua yang ada di antara cd events-app npm run serve8 tag dengan
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_2Mari kita lihat lebih dekat blok kode yang berubah (diberi spasi untuk keterbacaan yang lebih baik)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_3Anda dapat mengulangi peristiwa dalam larik ? Please pick a preset: default (babel, eslint) > Manually select features_56 menggunakan direktif Vue ? Please pick a preset: default (babel, eslint) > Manually select features63. Ini bertindak sebagai ? Please pick a preset: default (babel, eslint) > Manually select features64 loop dan mengeluarkan setiap peristiwa secara individual sehingga dapat dirender secara terpisah oleh komponen ? Please pick a preset: default (babel, eslint) > Manually select features33
Ini juga pertama kalinya Anda melihat arahan
Arahan adalah jenis markup khusus yang dapat Anda gunakan untuk melakukan sesuatu pada elemen DOM. Di Vue, ini semua dimulai dengan ? Please pick a preset: default (babel, eslint) > Manually select features66. Jadi, dalam hal ini, Anda menggunakan singkatan ? Please pick a preset: default (babel, eslint) > Manually select features63 untuk membuat loop ? Please pick a preset: default (babel, eslint) > Manually select features64. Contoh umum lainnya adalah ? Please pick a preset: default (babel, eslint) > Manually select features69, yang membuat kondisional di dalam template. Anda dapat melihat a
Di sini, Anda menggunakan atribut ? Please pick a preset: default (babel, eslint) > Manually select features70 Vue untuk mengikat (dalam hal ini, ? Save this as a preset for future projects? (y/N) N6) ke setiap peristiwa
Catatan. Di Vue, ? Please pick a preset: default (babel, eslint) > Manually select features_72 adalah singkatan dari ? Please pick a preset: default (babel, eslint) > Manually select features73
Anda juga mengikat nilai ? Please pick a preset: default (babel, eslint) > Manually select features55 saat ini di ? Please pick a preset: default (babel, eslint) > Manually select features64 loop ke objek ? Please pick a preset: default (babel, eslint) > Manually select features55 yang Anda buat sebelumnya dengan ? Please pick a preset: default (babel, eslint) > Manually select features77. Ini akan memungkinkan Anda untuk mengirim objek ini ke komponen anak untuk dirender secara terpisah
Selanjutnya, Anda menggunakan ? Please pick a preset: default (babel, eslint) > Manually select features_09 untuk membuat setiap kartu menjadi tautan yang dapat diklik. Kembali ke file ? Please pick a preset: default (babel, eslint) > Manually select features_79, Anda membuat rute ? Please pick a preset: default (babel, eslint) > Manually select features80 dengan parameter rute ? Save this as a preset for future projects? (y/N) N6. Rute ini menggunakan komponen ? Please pick a preset: default (babel, eslint) > Manually select features_45, yang akan merender halaman untuk setiap peristiwa tertentu. Anda menggunakan ? Save this as a preset for future projects? (y/N) N6 dari setiap acara untuk memastikannya tertaut ke laman acara yang benar
Lanjutkan dan klik salah satu, dan Anda akan melihat bahwa itu tertaut ke satu halaman acara yang Anda buat
Terakhir, Anda memanggil komponen ? Please pick a preset: default (babel, eslint) > Manually select features_33 untuk mengisi setiap kartu. Anda mengirim variabel yang disebut ? Please pick a preset: default (babel, eslint) > Manually select features_55 ke kartu dan kemudian meneruskan ? Please pick a preset: default (babel, eslint) > Manually select features55 saat ini dari ? Please pick a preset: default (babel, eslint) > Manually select features64 loop
Saat ini, komponen ? Please pick a preset: default (babel, eslint) > Manually select features_33 belum siap untuk menerima data, jadi mari kita perbaiki
Komponen Kartu Acara
🛠️️ Buka komponen ? Please pick a preset: default (babel, eslint) > Manually select features33 di ? Please pick a preset: default (babel, eslint) > Manually select features41. Gulir ke bawah ke tempat Anda memiliki ? Please pick a preset: default (babel, eslint) > Manually select features53 tag dan ganti dengan ini
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_4Komponen ini memiliki sesuatu yang baru. ? Please pick a preset: default (babel, eslint) > Manually select features_92
Setiap kali komponen Anda mengharapkan data, Anda harus menambahkan nama variabel data tersebut ke opsi ? Please pick a preset: default (babel, eslint) > Manually select features92. ? Please pick a preset: default (babel, eslint) > Manually select features92 adalah kata yang lucu, tetapi sebenarnya hanya berarti properti
Prop adalah properti pada komponen
Di sinilah Anda menentukan data yang diharapkan komponen dari komponen induknya
Prop ? Please pick a preset: default (babel, eslint) > Manually select features_55 ini diteruskan ke komponen saat ini dari komponen induk. Ini memungkinkan Anda untuk menampilkannya di template HTML menggunakan kurung kurawal
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_5Ini dikenal sebagai. Menggunakan interpolasi string, Anda dapat menampilkan nilai ? Please pick a preset: default (babel, eslint) > Manually select features55 di template Anda. Ini adalah bentuk pengikatan data, artinya setiap kali nilai ? Please pick a preset: default (babel, eslint) > Manually select features55 di ? Please pick a preset: default (babel, eslint) > Manually select features98 berubah, nilai yang ditampilkan di template juga akan berubah
🛠️️ Untuk melihat ini beraksi, lanjutkan dan perbarui bagian templat ? Please pick a preset: default (babel, eslint) > Manually select features99 dengan ini
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_6Jika Anda kembali ke beranda di browser, Anda akan melihat kartu sekarang memiliki data yang benar
Sekadar meringkas, komponen induk, ? Please pick a preset: default (babel, eslint) > Manually select features_50, mengirim data peristiwa turun dari ? Please pick a preset: default (babel, eslint) > Manually select features64 loop dua kali terpisah. Setiap kali komponen ? Please pick a preset: default (babel, eslint) > Manually select features33 dipanggil, ia menerima ? Please pick a preset: default (babel, eslint) > Manually select features55 data ke ? Please pick a preset: default (babel, eslint) > Manually select features92, yang memungkinkan Anda merender nama, tanggal, dan lokasi
EventSingleComponent
Bagian terakhir dari aplikasi yang memerlukan update data adalah komponen ? Please pick a preset: default (babel, eslint) > Manually select features45. Buka ? Please pick a preset: default (babel, eslint) > Manually select features_42
Anda dapat melihat status komponen ini saat ini di browser di ? Please pick a preset: default (babel, eslint) > Manually select features44. Semuanya masih dikodekan dengan keras dan menunggu data
Komponen ini adalah contoh yang bagus tentang bagaimana mengirimkan data mulai menjadi rumit
Pikirkan kembali bagaimana tautan ke halaman ini dibuat di ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing08
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_7Ini menggunakan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing09 dari ? Please pick a preset: default (babel, eslint) > Manually select features64 loop untuk membuat tautan untuk setiap kartu/acara, tetapi bagaimana Anda mengirimkan data aktual?
Anda dapat menggunakan metode yang mirip dengan yang Anda gunakan sebelumnya untuk mengisi data dari ? Please pick a preset: default (babel, eslint) > Manually select features33 dan mengirim beberapa data ke ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing12 di ? Please pick a preset: default (babel, eslint) > Manually select features45. Tapi kemudian Anda akan menggunakan router untuk mengelola data, yang sedikit aneh
Anda juga harus mempertimbangkan apa yang akan terjadi jika alih-alih mengeklik tautan, seseorang langsung membuka ? Please pick a preset: default (babel, eslint) > Manually select features44. Bagaimana ia menerima alat peraga yang diharapkannya jika kode ? Please pick a preset: default (babel, eslint) > Manually select features09 spesifik itu tidak pernah diaktifkan?
Itu tidak akan
Jadi untuk aplikasi ini, opsi terbaik Anda adalah dengan menarik datanya lagi
Inilah inti dari apa yang perlu terjadi
- Raih ? Save this as a preset for future projects? (y/N) N_6 dari parameter rute (di URL)
- Gunakan itu untuk mengeluarkan acara yang benar dari daftar semua acara
- Isi template dengan data dari event tertentu
🛠️️ Untuk melakukan ini, buka ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing17 dan ganti seluruhnya dengan
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_8Gulir ke bawah ke bagian ? Please pick a preset: default (babel, eslint) > Manually select features_52 dan Anda akan melihat bahwa data yang Anda gunakan juga telah ditambahkan ke komponen ini. Tapi kali ini, ada potongan kode baru
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_9Pertama, mari kita bahas untuk apa ________14______19 digunakan
Instance Vue melewati banyak langkah saat dibuat. Ini menyiapkan observasi data, mengompilasi template, memasang instance Vue ke DOM, dan memperbarui DOM saat perubahan terdeteksi
Tetapi bagaimana jika Anda perlu melompat di beberapa titik di antara langkah-langkah ini dan menjalankan beberapa kode?
Pengait ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_19 memungkinkan Anda menjalankan beberapa kode tepat setelah instance dibuat
Ada beberapa kait siklus hidup yang tersedia, seperti yang Anda lihat pada gambar di bawah
Sumber Gambar.
Jadi tepat setelah instance dibuat, fungsi ________14______19 berjalan
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_9Fungsi ini membuat variabel bernama ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_22 yang akan menampung ? Save this as a preset for future projects? (y/N) N6 dari peristiwa yang ingin Anda render. Anda dapat menarik ? Save this as a preset for future projects? (y/N) N_6 ini dari parameter rute ? Save this as a preset for future projects? (y/N) N6 yang Anda atur sebelumnya di ? Please pick a preset: default (babel, eslint) > Manually select features43
Selanjutnya, Anda membuat variabel bernama ? Please pick a preset: default (babel, eslint) > Manually select features55, yang akan menampung objek acara. Ia menggunakan fungsi JavaScript ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing28 pada larik ? Please pick a preset: default (babel, eslint) > Manually select features56, yang akan mengulang melalui larik hingga menemukan peristiwa dengan ? Save this as a preset for future projects? (y/N) N6 dari ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing22 (parameter rute)
Kemudian Anda menyetel variabel ? Please pick a preset: default (babel, eslint) > Manually select features_55 ke hasil ini. Dan sekarang, Anda memiliki data yang diperlukan untuk merender peristiwa khusus ini
Idealnya, Anda ingin menarik data ini dari API. Dalam kasus seperti ini, Anda cukup menekan titik akhir yang mengembalikan kejadian spesifik yang Anda inginkan dengan mengirimkan parameter rute, tetapi karena Anda belum memiliki API, metode ini baik-baik saja. Sebagai tindak lanjut dari tutorial ini, Anda akan memfaktorkan ulang kode ini untuk menggunakan API sebenarnya
Hal keren lainnya yang Anda lakukan adalah mengulang gambar di acara tertentu. Mari kita lihat lebih dekat blok kode yang menampilkan gambar
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus_1Ini menggunakan direktif ? Please pick a preset: default (babel, eslint) > Manually select features_63 Vue lagi untuk mengulang melalui gambar. Setelah mengambil satu gambar, itu mengikat URL gambar, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing34, ke atribut ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing35. Merupakan praktik yang baik untuk selalu menyetel atribut ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_36, sehingga Anda dapat mengikat nilai untuk ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing37 ke atribut ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing36 dari gambar ini
Sekarang kembali ke beranda dan klik di sekitar. Semua komponen merender data yang benar, jadi saatnya menambahkan autentikasi
Menambahkan Otentikasi ke Aplikasi Vue Anda
Hal terakhir yang harus dilakukan adalah menambahkan fungsionalitas login ke aplikasi. Anda akan menggunakan layanan autentikasi Auth0 untuk melakukan ini
Pertama, daftar akun Auth0 gratis di sini →
Setelah Anda terdaftar, Anda akan dibawa ke dasbor manajemen Auth0
- Klik "Aplikasi" di sidebar kiri
- Klik tombol merah besar bertuliskan "Buat Aplikasi"
- Beri nama "Acara Vue" (atau apa pun yang Anda suka)
- Klik "Aplikasi Web Satu Halaman" untuk "tipe aplikasi"
- Klik "Buat"
🛠️️ Selanjutnya, klik "Pengaturan" untuk mengisi beberapa informasi yang diperlukan Auth0 untuk mengonfigurasi autentikasi untuk aplikasi Anda
URL Panggilan Balik yang Diizinkan — ? Please pick a preset: default (babel, eslint) > Manually select features18
Di sinilah Auth0 akan mengarahkan ulang pengguna setelah diautentikasi
URL Keluar yang Diizinkan — ? Please pick a preset: default (babel, eslint) > Manually select features18
Ini adalah URL tempat pengguna akan kembali setelah mereka keluar dari aplikasi Anda
Asal Web yang Diizinkan — ? Please pick a preset: default (babel, eslint) > Manually select features_18
Ini adalah URL yang digunakan Auth0
Gulir ke bawah dan klik tombol "Simpan Perubahan".
Itu saja yang Anda butuhkan dari dasbor untuk saat ini, tetapi jangan diklik dulu. Anda harus segera menarik beberapa nilai ini dari dasbor ke aplikasi Anda
Instal paket Auth0 SPA
🛠️️ Kembali ke terminal dan instal paket ________14______42 Auth0 di direktori root aplikasi
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus_2Buat pembungkus autentikasi
Selanjutnya, Anda akan membuat objek Vue pembungkus yang dapat digunakan kembali di sekitar Auth0 SDK. Anda juga akan membuat plugin Vue yang memaparkan pembungkus ini ke seluruh aplikasi
🛠️️ Buat file dan folder baru untuk ini. Pastikan Anda masih berada di direktori root ? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier9 dan masuk
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus_3🛠️️ Sekarang buka file ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing44 yang baru dibuat dan rekatkan di bawah ini
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus_4Komentar dalam file ini mencakup detail tentang apa yang terjadi, tetapi untuk meringkas, pertama-tama Anda membuat (atau mengembalikan) instance Auth0 SDK. Instance hanyalah objek Vue
- Instance berisi data berikut. ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_45, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing46, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing47, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing48, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing49, dan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing50
- Ini juga mencakup beberapa metode yang akan dipanggil nanti, tetapi perhatikan sekarang. ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_51, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing52, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing53, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing54, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing55, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing56, dan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing57
Selama kait siklus hidup ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing19, Anda membuat instance SDK
Saat pengguna mengklik "Masuk", mereka dialihkan ke halaman Login Universal Auth0 (lebih lanjut tentang ini nanti). Mereka akan memasukkan kredensial mereka di sana dan kemudian dialihkan kembali ke aplikasi. Di sinilah "URL Panggilan Balik yang Diizinkan" dari dasbor Auth0 berperan. ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_59 akan berjalan, yang akan mendapatkan data pengguna yang diautentikasi, mengambil token, dan memperbarui ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing46 ke true
Instance ini juga berisi objek ? Save this as a preset for future projects? (y/N) N_4 (ditarik dan ditempel di bawah). Objek ini akan menyimpan nilai untuk Auth0 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing62, ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing63, dan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing64 dari dasbor Auth0
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus_5Nilai-nilai ini tidak terlalu sensitif, tetapi masih merupakan praktik yang baik untuk membiarkannya di luar kendali sumber Anda (mis. g. GitHub). Jadi mari kita buat file yang dapat ditambahkan ke ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing65 sehingga Git akan mengabaikannya
🛠️️ Pastikan Anda masih berada di direktori ? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier9 dan jalankan
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus_6Jika Anda menggunakan Git atau kontrol versi lainnya, buka ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing65 atau yang setara. Rekatkan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_68 di baris mana saja. Sekarang file ini akan diabaikan saat Anda mendorong ke repo Anda lagi
🛠️️ Selanjutnya, buka ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing68 dan rekatkan di bawah ini
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus_7Menemukan nilai ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_70 Anda
- Buka dasbor Auth0
- Klik "Aplikasi" dan pilih aplikasi Anda
- Klik pada "Pengaturan"
- Salin nilai untuk "Domain" dan rekatkan ke ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing63 di ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing68
- Salin nilai untuk "ID Klien" dan tempel ke ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing62 di ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing68
Selanjutnya, buka ? Save this as a preset for future projects? (y/N) N_1 dan instal plugin dengan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing76. Plugin ini akan memungkinkan Anda untuk mengakses status autentikasi secara global (dari mana saja dalam aplikasi). ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_76 adalah metode global yang digunakan untuk memanggil plugin, dan harus ditempatkan sebelum ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing78
🛠️️ Ganti semua ? Save this as a preset for future projects? (y/N) N1 dengan yang berikut ini
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus_8Di sini Anda hanya mengimpor file konfigurasi Auth0 yang Anda buat untuk mendapatkan akses ke nilai ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing63 dan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing62. Selanjutnya, Anda mengimpor ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_82 yang telah dibuat sebelumnya
Terakhir, Anda menginstal dan mengonfigurasi plugin
Wiring up tombol login dan logout
Sekarang Anda telah mengkonfigurasi plugin autentikasi Auth0, saatnya untuk memperbaiki tombol "Masuk" sehingga benar-benar melakukan sesuatu
🛠️️ Buka ________7______22. Temukan blok kode yang dimulai dengan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing84 dan ganti dengan ini
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus_9Tombol sekarang dibungkus ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_85 untuk memastikan bahwa klien SDK telah selesai memuat sebelum Anda mencoba mengakses status pengguna. Selanjutnya, Anda menggunakan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_86, yang akan menangani peristiwa klik dengan memanggil metode ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing87 atau ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing57 saat pengguna mengklik tombol masing-masing
🛠️️ Ayo buat metode tersebut sekarang. Di file yang sama, gulir ke bawah ke tag ? Please pick a preset: default (babel, eslint) > Manually select features52 dan ganti dengan ini
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier0Sekarang kembali ke aplikasi dan klik "Masuk" dan Anda akan dialihkan ke halaman Auth0 Universal Login
Jika Anda mengalami masalah, periksa kembali apakah nilai Anda di ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing68 sudah benar. Jika Anda masih mengalami masalah, tinggalkan komentar di bawah, dan saya akan membantu Anda menyelesaikannya
Setelah Anda membuka halaman Login Universal Auth0, daftar dengan akun pengguna palsu. Anda kemudian akan melihat layar yang memberi tahu Anda bahwa aplikasi meminta akses ke profil dan email Anda
Klik tanda centang, dan Anda akan dialihkan kembali ke "URL Panggilan Balik yang Diizinkan" yang Anda tentukan di dasbor, yang merupakan beranda aplikasi Anda. Sekarang alih-alih tombol "Masuk", Anda akan melihat tombol "Keluar".
Opsional. Auth0 menawarkan opsi masuk sosial langsung dari dasbor. Google diaktifkan secara default, dan Anda dapat mengaktifkannya satu per satu di dasbor pengelolaan Auth0
Klik "Koneksi"> "Sosial" di sidebar. Pastikan untuk menggunakan kunci dev Anda sendiri jika ingin mengintegrasikan sign-on sosial. Kunci dev Auth0 default baik-baik saja untuk pengujian, tetapi dapat menyebabkan kesalahan yang tidak terduga (seperti keluar saat penyegaran), jadi kami tetap menyarankan untuk menggunakan milik Anda sendiri
Mengakses informasi pengguna
Auth0 memungkinkan Anda mengakses informasi pengguna yang masuk di templat Anda dengan yang berikut ini
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier_1Isi ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing_91 terlihat seperti ini
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier_2Jadi jika Anda ingin menambahkan halaman profil di masa mendatang, Anda memiliki akses ke data ini (dan lebih banyak lagi) untuk ditampilkan
Sekarang setelah Anda tahu cara menambahkan tombol masuk, mari pasang tombol kedua di beranda
🛠️️ Buka ? Save this as a preset for future projects? (y/N) N0 dan ganti semuanya antara ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing93 dengan yang berikut
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier_3🛠️️ Sekarang Anda hanya perlu menambahkan bagian metode dengan fungsi ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing94. Gulir ke bawah ke tempat tag ? Please pick a preset: default (babel, eslint) > Manually select features_52 dan ganti ? Please pick a preset: default (babel, eslint) > Manually select features36 dengan ini
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier_4Sekarang pengguna dapat masuk dengan tombol ini juga, dan setelah mereka masuk, itu akan diganti dengan pesan selamat datang dengan nama mereka menggunakan ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing97
Siapkan Penjaga Rute
Jadi sekarang, hal terakhir yang perlu Anda lakukan adalah mengalihkan pengguna yang tidak diautentikasi dari halaman Peristiwa Tunggal. Ini berarti mereka harus dapat melihat beranda dengan daftar kartu/acara, tetapi segera setelah mereka mengklik ke halaman detail acara, mereka harus ditendang ke halaman masuk
⚡️ PENTING ⚡️ Ini hanya mencegah halaman dimuat; . Anda TIDAK PERNAH mengandalkan frontend untuk melindungi data Anda
Karena Anda belum membuat API backend, Anda hanya menyimpan semua data dalam komponen di frontend. Meskipun Anda akan menyiapkan penjaga rute untuk mengalihkan pengguna yang tidak diautentikasi dari satu halaman acara, mereka masih dapat membaca file JavaScript dan menemukannya. Saya akan menunjukkan caranya sebentar lagi
{% jika halaman. url berisi '/amp/' %} Pada bagian 2, Anda akan mem-build API sehingga data ini disimpan dan dilindungi di backend dan hanya ditarik ke frontend jika pengguna diautentikasi. {% else %} Di bagian 2, Anda akan mem-build API sehingga data ini disimpan dan dilindungi di backend dan hanya ditarik ke frontend jika pengguna diautentikasi. {% berakhir jika %}
Mari atur penjaga rute sekarang sehingga ketika data datang dari backend, UI untuk mendorong pengguna ke halaman login sudah ada
🛠️️ Buat file bernama ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing98 di direktori ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing99
{% prism bash %} sentuh src/auth/authGuard. js {%endprism %}
🛠️️ Buka itu di editor Anda dan rekatkan di bawah ini
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier5Ini menggunakan metode ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_00 dari file ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◯ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing44, yang akan menerapkan fungsi yang mencegah rute diakses jika pengguna tidak masuk
Jika pengguna diautentikasi, ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_02 dikembalikan, yang memungkinkan pengguna melanjutkan ke rute yang diklik. Jika pengguna tidak diautentikasi, mereka dialihkan ke halaman Auth0 Universal Login
Selanjutnya, Anda perlu menambahkan penjaga autentikasi ini ke router agar ini berjalan sebelum tampilan apa pun dikembalikan
Anda cukup memeriksa apakah pengguna diautentikasi. Jika ya, biarkan mereka lewat, jika tidak, kirim mereka ke halaman login
🛠️️ Buka file router di ? Please pick a preset: default (babel, eslint) > Manually select features43 dan tambahkan ganti dengan
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier_6? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_04 diimpor di bagian atas. Karena Anda hanya ingin meminta autentikasi untuk rute detail acara, telah ditambahkan ke rute tersebut
Sekarang, jika Anda sudah masuk sebelumnya, Anda dapat mengklik salah satu kartu acara tersebut dan Anda masih dapat melihat halaman tunggal acara tersebut
Tetapi jika Anda membuka jendela penyamaran dan mencoba mengakses rute yang sama, Anda akan ditendang ke halaman login, persis seperti yang diharapkan
Seperti yang dibahas sebelumnya, ini tidak mencegah pengguna menemukan data untuk halaman tersebut
Jika Anda ingin tahu bagaimana ini mungkin, keluar atau buka jendela penyamaran, lalu buka ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y_06 di browser Anda. Sekarang telusuri salah satu deskripsi acara seperti "Habiskan malam yang elegan dengan makan malam dan berdansa bersama kami saat kami menggalang dana untuk pertanian penyelamatan baru kami. ", dan benar saja, ada datanya
Jadi pada titik ini, Anda mungkin bertanya, "Holly, lalu apa gunanya redirect?"
Saya senang Anda bertanya. Ini sebagian besar dimaksudkan untuk pengalaman pengguna. Bayangkan bahwa data dilindungi di backend. Anda ingin memberi sinyal bahwa pengguna harus masuk untuk melihat halaman tertentu itu. Jika Anda tidak merender data apa pun di halaman itu, pengguna akan dihadapkan pada halaman kosong dan berpikir ada sesuatu yang rusak. Dalam skenario ini, mengarahkan mereka ke halaman masuk akan dengan mudah menandakan bahwa mereka harus masuk untuk melihatnya
Di bagian 2 tutorial ini, Anda akan mempelajari cara membuat API di Express dan menarik data ke dalam aplikasi Vue Anda dari sana. Ia menggunakan aplikasi Vue yang sama dengan yang baru saja Anda buat, jadi jika Anda tertarik, Anda dapat mulai menjalankannyaBungkus
Jika ini pertama kalinya Anda bekerja dengan Vue. js, semoga ini membantu Anda memahami bagaimana semuanya menyatu dalam aplikasi kecil. Sekadar rekap, berikut adalah beberapa topik yang dibahas dalam tutorial ini