Saya cuba beralih kepada Vue.js daripada React.js

pengenalan

Beberapa tahun yang lalu, seperti kebanyakan orang lain, saya "digembar-gemburkan" dengan kedatangan cangkuk dan komponen berfungsi perpustakaan hadapan React.js. Mereka menawarkan cara pembangunan yang benar-benar baharu dengan menulis kod yang lebih sedikit berbanding dengan kelas Komponen. Saya benar-benar ketagih, dan untuk seketika.

Hari ini saya terpaksa memilih rangka kerja Vue.js untuk memenuhi keperluan projek pelanggan serba baharu. Dan setelah sampai ke penghujung projek ini, saya berkata kepada diri saya sendiri bahawa ini adalah peluang untuk menawarkan anda maklum balas sebagai pengguna baharu rangka kerja ini!

Jadi, adakah peningkatan kemahiran ini sesuai dengan kemasyhuran Vue.js?
Adakah lebih baik, hari ini, untuk membangunkan bahagian hadapan dalam Vue daripada dalam React?

Itulah yang akan kita lihat!

Permulaan projek

Plat dandang

Siapa kata memulakan projek, kata mencari boilerplate yang bagus untuk menjimatkan masa kami, malah berhari-hari konfigurasi yang susah payah!
Tanpa perlu melihat jauh, arahan npm create vue@latest sebahagian besarnya memenuhi keperluan saya:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

Bahasa Typescript sudah disokong, sistem penghalaan dan kedai ditawarkan, malah terdapat ruang untuk ujian unit dan End-to-End!

Secara lalai, pengikat Vite dipasang. Mana taknya saya tak puas hati!? Memang, binaan adalah pantas dan, kebanyakan masa, Penggantian Modul Panas (HMR) berfungsi dengan baik.

Sedikit npm run dev untuk melancarkan pelayan dev tempatan, dan presto! Ia sudah berjalan dalam penyemak imbas!

Dan untuk pengeluaran? Hanya masukkan perintah binaan run npm, dan projek dieksport sebagai fail statik dalam direktori dist selepas menyemak taip (dalam kes di mana Typescript telah diaktifkan):

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Seni bina projek

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

Di bahagian seni bina projek, kami dapati khususnya:

• fail index.html, dengan teg
  di mana keseluruhan aplikasi Vue kami dicantumkan;
• utama.ts, dengan penciptaan berturut-turut komponen Apl, penghala dan kedai:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

• fail .ts tulen, untuk mengurus penghalaan dan kedai;
• beberapa fail konfigurasi dan ujian;
• ... dan sudah tentu fail *.vue, dibezakan kepada komponen (yang lebih sesuai dengan elemen generik dan boleh guna semula), dan pandangan (yang lebih sepadan dengan tahap tinggi muka surat)

Ringkasnya, seni bina fail agak mudah dan agak serupa dengan React, walaupun dengan banyak pilihan yang ditandakan dalam boilerplate.
Setakat ini, datang dari React, tiada apa yang benar-benar baru. Pada masa itulah perbezaan ketara kelihatan!

Seni bina fail Vue

Berikut ialah coretan kod yang diilhamkan oleh tapak web rasmi. Ia hanya menukar warna teks jika diklik dan memaparkan frasa "Teks di atas berwarna hijau" jika berkenaan, tetapi ia mewakili seni bina tipikal fail *.vue:

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Perhatikan pengikatan acara dengan @click, paparan bersyarat dengan v-if dan pengikatan dalam CSS dengan v-bind().

Kod dipisahkan kepada 3 bahagian yang sangat berbeza:

• skrip: kod kawalan;
• templat: struktur HTML;
• gaya: helaian gaya CSS.

Dan ketiga-tiga bahagian ini tidak pernah bercampur ?.
Ini mempunyai beberapa kelebihan yang saya alami secara peribadi sepanjang pengalaman saya pada projek pelanggan:

• Struktur HTML adalah jelas, tetap dan dalam sangat gaya pengisytiharan - semuanya ada, malah teg dipaparkan secara bersyarat;
• bahagian logik diasingkan dengan baik daripada bahagian paparan;
• anda boleh menulis CSS tulen di tempatnya, dipautkan terus kepada komponen dan tanpa memasang perpustakaan pihak ketiga;
• walaupun terdapat pemisahan gaya, anda masih boleh memasukkan pembolehubah dalam CSS.

Dengan teg berskop pada teg